it-swarm.com.de

Wie holt man XML mit Fetch API?

Ich versuche, eine Wetter-App zu erstellen, die das Wetter und die Temperatur vieler Tage der Woche anzeigt. Ich verwende derzeit Openweathermap-API für eine solche Aufgabe, die Sache ist, dass die Informationen, die ich möchte (dh das Datum des Wetters), nur im XML-Format vorliegen .. Da ich sie in ES6 (ES2015) für neu aufbaue Aus akademischen Gründen wollte ich auch die Abruf-API verwenden, aber da die Abrufmethode sie analysiert, gibt sie nur einen Fehler aus. So kann ich sie abrufen oder mby gibt es eine bessere Möglichkeit, dies zu tun.

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))
26
Trip1

Mit nativem DOMParser kann getCurrentCity (location) geschrieben werden:

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))
}

40
JukkaP

Ich schätze, der Fehler kommt von dieser Funktion: response => response.json(), da die Antwort kein gültiges JSON-Objekt ist (es ist XML).

Soweit ich weiß, gibt es keinen nativen XML-Parser für fetch, aber Sie können die Antwort als Text behandeln und ein Drittanbieter-Tool für das eigentliche Parsing verwenden. Beispielsweise hat jQuery die Funktion $.parseXML().

Es wird ungefähr so ​​aussehen:

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))
}
9
Gilad Artzi

Es ist möglich, die npm xml-js-Bibliothek und den node-fetch zu verwenden, um dies in Node.js für diejenigen zu tun, die dies in der Node-REPL testen möchten. 

Zunächst installieren wir die beiden Module xml-js und node-fetch mit:

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

um diese beiden Pakete in package.json zu speichern. Nun zu unserem aktuellen Problem - wie man mit XML-Daten arbeitet, die von einer API zurückgegeben werden. 

Betrachten Sie das folgende Beispiel, um eine bestimmte Wetterstation in Norwegen abzurufen: 

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!`);
});

Wir haben jetzt eine Variable, die aus den XML-Daten mithilfe der xml2json-Methode von convert und mithilfe von JSON.parse tatsächlich in ein JSON-Objekt analysiert wird. Wenn wir das Objekt ausdrucken möchten, können Sie JSON.stringify verwenden, um das JSON-Objekt in eine Zeichenfolge umzuwandeln. Das Abrufen der Stations-ID in diesem Code zeigt lediglich die Notwendigkeit, einen Objektgraphen tief nach einem bestimmten Schlüssel abzusuchen, da das Umwandeln von XML in Json oft sogar tiefere Objektgraphen ergibt, da die umschließenden XML-Elemente immer oben auf dem " XML-Objekt JSON-Graph ". Es gibt einige Tipps zum Durchsuchen von Objektgraphen, die nach einem Schlüssel suchen, wie zum Beispiel obj-traverse-Bibliothek in GitHub

0
Tore Aurstad