web-dev-qa-db-fra.com

Comment récupérer du XML avec fetch api

J'essaie de créer une application météo qui affiche la météo et la température de nombreux jours de la semaine. J'utilise actuellement openweathermap api pour une telle tâche, le fait est que les informations que je veux (c'est la date de la météo) ne sont disponibles qu'au format xml . Depuis que je la reconstruis en ES6 (ES2015), Pour des raisons académiques, je voulais aussi utiliser le fetch api, mais comme la méthode fetch le traite, elle produit juste une erreur . Alors, comment puis-je le chercher ou le trouver, il existe un meilleur moyen de le faire.

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

En utilisant natif DOMParser, getCurrentCity (location) peut s’écrire:

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

Je suppose que l'erreur provient de cette fonction: response => response.json() puisque la réponse n'est pas un objet JSON valide (c'est du XML).

Autant que je sache, il n'y a pas d'analyseur XML natif pour fetch, mais vous pouvez gérer la réponse sous forme de texte et utiliser un outil tiers pour analyser, par exemple, jQuery a une fonction $.parseXML().

Cela ressemblera à quelque chose comme:

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

Il est possible d'utiliser la bibliothèque npm xml-js et node-fetch pour le faire dans Node.js, pour ceux qui souhaitent le tester dans le nœud REPL. 

Tout d'abord, nous installons les deux modules xml-js et node-fetch avec:

npm installe xml-js --save npm installer node-fetch --save

pour stocker ces deux paquets dans package.json. Passons maintenant à notre problème actuel: comment utiliser les données XML renvoyées par une API. 

Prenons l'exemple suivant pour aller chercher une station météorologique particulière en Norvège: 

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

Nous avons maintenant une variable qui est réellement analysée dans un objet JSON à partir des données XML à l'aide de la méthode xml2json de convert et de JSON.parse. Si nous voulons imprimer l'objet, nous pouvons utiliser JSON.stringify pour transformer l'objet JSON en chaîne. La récupération de l'identifiant de station dans ce code montre simplement la nécessité d'analyser un graphe d'objet en profondeur pour trouver une clé donnée, car la conversion de XML en Json donne souvent des graphes d'objet encore plus profonds, car les éléments XML enveloppants sont toujours au sommet du " Objet XML JSON-graph ". Il existe quelques astuces sur les graphes d’objet de recherche en profondeur qui permettent de rechercher une clé, telle que bibliothèque obj-traverse sur GitHub

0
Tore Aurstad