[ReactNative] xml2js 라이브러리로 XML to JSON 하기

Today, What I learned?

프로젝트 중!.. api에서 가져오는 xml 데이터를 JSON 데이터로 변환하기 위해 라이브러리를 사용하는 과정을 정리해 본다.

먼저 사용한 라이브러리는 이것이다.

https://github.com/connected-io/react-native-xml2js

GitHub - connected-io/react-native-xml2js: XML to JavaScript object converter.

 

 

변환하기

const parseString = require('react-native-xml2js').parseString;

export const getBoxOffice = () =>
  fetch(
    `${BASE_URL}/boxoffice?service=${API_KEY}&ststype=day&date=${getYesterdayString()}&catecode=GGGA&area=11`
  )
    .then((res) => res.text())
    .then((data) => {
        const cleanedString = data.replace('\ufeff', '');
      let boxOfficeData;
      parseString(cleanedString, (err, result) => {
        if (err !== null) {
          console.log('error: ', err);
          return;
        }
        boxOfficeData = JSON.parse(JSON.stringify(result));
      });
      return boxOfficeData;
    })
    .catch((error) => console.log(error));

패치해와서 parseString 함수로 데이터를 파싱 한다.

featch 함수 안에서 데이터를 리턴해주는 것을 꼭 잊지 말자!..

 

결과물은 아래와 같다. 이제 이 부분에서 boxofs, boxof안으로 들어가서 데이터를 렌더링 하면.. 🥺

 

 

Non-whitespace before first tag

 const cleanedString = data.replace('\ufeff', '');

요 부분은 Non-whitespace before first tag 라는 에러가 떠서 넣어주었다.
fetch 해온 xml 데이터에서 공백을 없애주는 코드다.

그리고 저 함수를 parseString 함수의 매개변수로 넣어주면 된다.

 

 

 

xml 데이터를 json으로 바꾸기.. 라이브러리 덕에 쉽게 해결할 수 있었다! (마냥 쉽지 않았음..)