[javascript] JSON 데이터를 배열로 만들기

서버 API를 이용해 RESTFul 서비스를 제공하는 방식의 개발이 일반화되면서 JSON(Javascript Object Notation)은 API를 통한 데이터 교환의 사실상 표준이 되었습니다.

자바스크립트는 JSON 데이터 요소에 객체 참조 방식으로 접근이 가능하기 때문에 데이터를 UI에 적용하는데 직관적인 환경을 제공합니다.

UI에 JSON 데이터를 가져와 적용할 때는 편리하지만, 데이터를 재가공하거나, 계산 결과를 얻어야 하는 경우 번거롭기 때문에 필요한 부분은 별도로 배열로 변형해 사용해야 할 필요가 있습니다.

값만 배열로 추출

JSON 데이터가 "이름:값"의 가장 단순한 형태인 경우, 값만 배열로 추출할 수 있습니다.

json1 = {value1:13, value2:10, value3:5, value4:40};
console.log(Object.values(json1));

* Object.keys() 메서드는 키값만 모아서 배열로 반환합니다.

순환 메서드를 이용해 배열로 변환

JSON 값이 배열인 경우 순환 메서드로 값을 추출할 수 있습니다.

json2 = {data:[{value:13}, {value:10}, {value:5}, {value:40}]};
let result2 = [];
json2.data.forEach((item,idx)=>{
  result2.push(parseInt(item.value));
});
console.log(result2);

여러값을 중첩 배열로 가져오기

json3 = {data:[{name:'라이언', value:13}, {name:'콘', value:10}, {name:'무지', value:5}, {name: '프로도', value:40}]};
let result3 = [];
json3.data.forEach((item)=>{
  result3.push([item.name, parseInt(item.value)]);
})
console.log(result3);