JavaScript에서 JSON 배열을 반복하는 방법 – JSON.parse() 완벽 가이드

JSON 형식의 문자열로 이루어진 배열을 다룰 때는 각 요소를 실제 객체로 변환한 뒤 반복 처리하는 것이 좋습니다. 이때 가장 널리 쓰이는 방법이 바로 JSON.parse() 메서드입니다.

JSON.parse()는 문자열 형태의 JSON 데이터를 자바스크립트 객체로 변환해 주며, map() 함수와 함께 사용하면 배열의 모든 요소를 한 번에 손쉽게 파싱할 수 있습니다.

예제 코드

다음은 문자열 형태의 JSON 데이터를 담고 있는 배열을 객체 배열로 변환하는 예제입니다.

var apiValues =
    [
      '{"name": "John", "scores": [78, 89]}',
      '{"name": "David", "scores": [58, 98]}',
      '{"name": "Bob", "scores": [56, 79]}',
      '{"name": "Mike", "scores": [94, 91]}'
    ];
var parseJSONObject = apiValues.map(obj => JSON.parse(obj));
console.log("원본 문자열 : ", apiValues);
console.log("변환된 JSON 객체 : ", parseJSONObject);

코드 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 아래 명령어를 입력합니다.

node fileName.js

여기서 파일 이름은 demo252.js라고 가정합니다.

실행 결과

프로그램을 실행하면 콘솔에 다음과 같은 출력 결과가 표시됩니다.

PS C:\Users\Amit\javascript-code> node demo252.js
원본 문자열 :  [
    '{"name": "John", "scores": [78, 89]}',
    '{"name": "David", "scores": [58, 98]}',
    '{"name": "Bob", "scores": [56, 79]}',
    '{"name": "Mike", "scores": [94, 91]}'
]
변환된 JSON 객체 :  [
    { name: 'John', scores: [ 78, 89 ] },
    { name: 'David', scores: [ 58, 98 ] },
    { name: 'Bob', scores: [ 56, 79 ] },
    { name: 'Mike', scores: [ 94, 91 ] }
]

핵심 정리

• JSON.parse(): JSON 형식의 문자열을 자바스크립트 객체로 변환합니다.
• map(): 배열의 각 요소에 동일한 작업을 적용하여 새로운 배열을 반환합니다.
• 두 메서드를 조합하면 문자열 배열 전체를 객체 배열로 한 번에 변환할 수 있습니다.

이렇게 변환된 객체 배열은 forEach, for...of 등 다양한 반복문으로 자유롭게 순회하며 데이터를 활용할 수 있습니다.