Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fetch XML with fetch api

I'm trying to making a weather app that displays the weather and the temperature of many days of the week. I'm currently using openweathermap api for such task, the thing is that the information that I want (that is the date of the weather) only comes in xml format. Since I'm rebuilding it in ES6(ES2015) for academic reasons I wanted to also use the fetch api but since the fetch method parses it, it just delivers an error. so how can i fetch it or mby there is a better way to do it.

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)) 
like image 483
Trip1 Avatar asked Jun 08 '16 05:06

Trip1


2 Answers

Using native DOMParser getCurrentCity(location) can be written:

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)); } 
like image 71
JukkaP Avatar answered Sep 19 '22 06:09

JukkaP


I guess the error is coming from this function: response => response.json() since the response is not a valid JSON object (it's XML).

As far as I know, there is no native XML parser for fetch, but you can handle the response as text and use a third party tool to do the actual parsing, for example jQuery has a $.parseXML() function.

It will look something like:

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)) } 
like image 39
Gilad Artzi Avatar answered Sep 21 '22 06:09

Gilad Artzi