fetch api로 XML을 가져오는 방법

fetch api로 XML을 가져오는 방법

날씨와 여러 요일의 기온을 보여주는 날씨 앱을 만들려고 합니다.저는 현재 그런 작업을 위해 openweathermap api를 사용하고 있는데, 문제는 제가 원하는 정보(즉, 날씨 날짜)가 xml 형식으로만 나온다는 것입니다.학문적인 이유로 ES6(ES2015)에서 리빌드하기 때문에 fetch api도 사용하고 싶었지만 fetch 방법이 파싱하기 때문에 오류가 발생할 뿐입니다.그래서 어떻게 하면 더 나은 방법으로 가져올 수 있을까요?

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

네이티브 DOM ParsergetCurrentCity(위치)를 사용하면 다음과 같이 쓸 수 있습니다.

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

다음 기능에서 오류가 발생하는 것 같습니다.response => response.json()응답이 유효한 JSON 개체(XML)가 아니기 때문입니다.

네이티브 XML 파서는 없는 것으로 알고 있습니다.fetch, 그러나 당신은 텍스트로 응답을 처리할 수 있고 실제 파싱을 수행하기 위해 제 3자 도구를 사용할 수 있습니다. 예를 들어 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))
}

Npm xml-js 라이브러리와 node-fetch를 사용하여 Node.js에서 이 작업을 수행하는 것이 가능하며, Node REPL에서 이를 테스트하려는 사람들을 위해 가능합니다.

먼저 다음과 같이 두 모듈 xml-js와 노드 가져오기를 설치합니다.

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

이 두 개의 패키지를 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!`
        );
    });

이제 변환의 xml2json 메서드를 사용하고 JSON.parse를 사용하여 XML 데이터에서 JSON 개체로 실제로 구문 분석되는 변수가 생겼습니다.개체를 출력하려면 JSON.stringify를 사용하여 JSON 개체를 문자열로 변환할 수 있습니다.이 코드에서 station id를 검색하면 XML 요소가 항상 "XML 개체 JSON-graph"의 맨 위에 있기 때문에 XML을 Json으로 변환하면 종종 더 깊은 개체 그래프를 얻을 수 있기 때문에 주어진 키에 대해 개체 그래프를 깊이 스캔할 필요성을 보여줍니다.GitHub의 obj-traverse 라이브러리처럼 키를 찾기에는 깊이 있는 객체 그래프 검색에 대한 몇 가지 팁이 있습니다.

이게 내 각진 앱에서 작동했어요.

import * as xml2js from 'xml2js';

url = MY_URL;

ngOnInit(): void {
 this.getData();
}

getData(): void {
  fetch(MY_URL)
    .then(response => response.text())
    .then(data => {
      let parseString = xml2js.parseString;
      parseString(data, function (err, result) {
        console.log(result);
        console.error(err);
      });
    });
}

언급URL : https://stackoverflow.com/questions/37693982/how-to-fetch-xml-with-fetch-api