web-dev-qa-db-ja.com

fetch APIでXMLを取得する方法

私は、週の多くの日の天気と気温を表示する天気アプリを作成しようとしています。私は現在、そのようなタスクにopenweathermap apiを使用しています。問題は、必要な情報（天気の日付）がxml形式のみであるということです。学術的な理由でES6（ES2015）で再構築しているので、フェッチAPIも使用したかったのですが、フェッチメソッドがそれを解析するため、エラーが発生するだけです。だからどうすればそれを取得できますか、それを行うにはより良い方法があります。

let apis = {
    currentWeather: { //get user selected recomendation weather
        api:"http://api.openweathermap.org/data/2.5/forecast/daily?lat=",
        parameters: "&mode=xml&units=metric&cnt=6&APPID=/*api key*/",
        url: (lat, lon) => {
            return apis.currentWeather.api + lat + "&lon=" + lon +
                   apis.currentWeather.parameters
        }
    }
};
function getCurrentLoc() { 
    return new Promise((resolve, reject) =>  navigator.geolocation
                                             .getCurrentPosition(resolve, reject))
}
function getCurrentCity(location) {
    const lat = location.coords.latitude;
    const lon = location.coords.longitude;
    return fetch(apis.currentWeather.url(lat, lon))
    .then(response => response.json())
    .then(data => console.log(data))
}
getCurrentLoc()
.then( coords => getCurrentCity(coords))
javascriptxmlfetch-api
28
Trip1

ネイティブDOMParserを使用して、getCurrentCity（location）を記述できます。

function getCurrentCity(location) {
    const lat = location.coords.latitude;
    const lon = location.coords.longitude;
    return fetch(apis.currentWeather.url(lat, lon))
        .then(response => response.text())
        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
        .then(data => console.log(data))
}
49
JukkaP

応答は有効なJSONオブジェクト（XML）ではないため、この関数response => response.json()からエラーが発生していると思います。

私の知る限り、fetchのネイティブXMLパーサーはありませんが、応答をテキストとして処理し、サードパーティのツールを使用して実際の解析を行うことができます。たとえば、jQueryには$.parseXML() 関数。

次のようになります。

function getCurrentCity(location) {
    const lat = location.coords.latitude;
    const lon = location.coords.longitude;
    return fetch(apis.currentWeather.url(lat, lon))
        .then(response => response.text())
        .then(xmlString => $.parseXML(xmlString))
        .then(data => console.log(data))
}
10
Gilad Artzi

Node REPL。でこれをテストしたい人のために、npm xml-jsライブラリとnode-fetchを使用してNode.jsでこれを行うことができます。

まず、次の2つのモジュールxml-jsとnode-fetchをインストールします。

npm install xml-js --save npm install node-fetch --save

これら2つのパッケージをpackage.jsonに保存します。次に、手元の問題-APIから返されたXMLデータを操作する方法について説明します。

ノルウェーの特定の気象観測所を取得する次の例を考えてみましょう。

const fetch = require('node-fetch');
const convert = require('xml-js');
let dataAsJson = {};
fetch('http://eklima.met.no/metdata/MetDataService?invoke=getStationsProperties&stations=68050&username=').then(response => response.text()).then(str => {
    dataAsJson = JSON.parse(convert.xml2json(str));
}).then(() => {
    console.log(`Station id returned from the WS is: ${dataAsJson.elements[0].elements[0].elements[0].elements[0].elements[0].elements.filter(obj => { return obj.name == 'stnr'; })[0].elements[0].text} Expecting 68050 here!`);
});

Convertのxml2jsonメソッドとJSON.parseを使用して、XMLデータから実際にJSONオブジェクトに解析される変数を取得しました。オブジェクトを出力する場合は、JSON.stringifyを使用してJSONオブジェクトを文字列に変換できます。 XMLをJsonに変換すると、より深いオブジェクトグラフが得られることが多いため、このコードでのステーションIDの取得は、特定のキーのオブジェクトグラフを深くスキャンする必要があることを示しています。 XMLオブジェクトJSON-graph」。 GitHubのobj-traverseライブラリ のように、キーを探すのに深いオブジェクトグラフのディープサーチに関するヒントがいくつかあります。

1
Tore Aurstad