JavaScript에서 다른 속성 값을 기반으로 중첩 JSON 속성에 접근하는 방법

JavaScript에서 다른 속성의 값(예: 과목 이름)을 기준으로 중첩된 JSON 데이터 안의 특정 속성(예: 점수)에 접근하려면, JSON.parse()로 파싱한 배열을 반복문으로 순회하면서 조건에 일치하는 객체를 찾고 해당 값을 반환하면 됩니다.

동작 원리

위 예제는 다음과 같은 순서로 동작합니다.

1. studentDetails() 함수가 학생 정보를 담은 JSON 문자열을 반환합니다.
2. JSON.parse()가 이 문자열을 JavaScript 배열 객체로 변환합니다.
3. getMarksUsingSubjectName() 함수가 for...of 반복문으로 각 객체를 확인하며, subjectName이 지정한 과목 이름과 일치하는지 검사합니다.
4. 일치하는 객체를 찾으면 해당 학생의 marks(점수)를 반환합니다.

예제 코드

var actualJSONData = JSON.parse(studentDetails()),
studentMarks = getMarksUsingSubjectName(actualJSONData, "JavaScript");
console.log("The student marks=" + studentMarks);

function getMarksUsingSubjectName(actualJSONData, givenSubjectName){
   for(var tempObj of actualJSONData){
      if(tempObj.subjectName === givenSubjectName){
         return tempObj.marks;
      }
   }
}

function studentDetails(){
   return JSON.stringify(
      [
         { firstName : "John", subjectName: "JavaScript", marks : 97 },
         { firstName : "David", subjectName: "Java", marks : 98 }
      ]
   );
}

주의: 조건 비교 시에는 반드시 등호 연산자 ===를 사용해야 합니다. 할당 연산자 =를 실수로 사용하면 항상 참으로 평가되어 첫 번째 요소가 그대로 반환되는 버그가 발생할 수 있습니다.

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다 −

node fileName.js

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

실행 결과

프로그램을 실행하면 다음과 같은 출력을 확인할 수 있습니다 −

PS C:\Users\Amit\JavaScript-code> node demo155.js
The student marks=97

참고: find() 메서드를 활용한 더 간결한 방법

ES6 이상 환경이라면 Array.prototype.find() 메서드를 사용해 같은 로직을 한 줄로 표현할 수도 있습니다.

const studentMarks = actualJSONData.find(
   item => item.subjectName === "JavaScript"
).marks;

console.log("The student marks=" + studentMarks); // 97

이 방식은 반복문을 직접 작성하지 않아도 되므로 코드가 더 간결하고 가독성이 높아집니다. 다만 일치하는 요소가 없을 경우 undefined가 반환될 수 있으므로, 필요하다면 옵셔널 체이닝(?.)으로 안전하게 처리하는 것이 좋습니다.