본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[기초] Javascript

자바스크립트 Object(Json) 객체에서 원하는 값 찾기(Javascript find data from json)

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2022. 8. 30.

 

어떤 개발자 커뮤니티 사이트에서 매번 같은 내용을 올리시는분이 있었습니다.

특정 데이터 값이 아래와 같이 존재할 때 해당 값을 찾는 기능을 필요로 하셨었습니다..흠...

아래 코드는 원하는 데이터를 찾는 함수샘플코드 입니다.

let json = {
    "data":{"number":"111", "test":"asdfasd"},
    "data2":{"number":"222", "test":"asdf23123"},
    "data3":{"number":"333", "test":"g3453"},
    "data4": [
    	{"address":"1111", "string":"asdf"}, 
        {
            "address":"2222", 
            "array":[ 
            	{"number" : 5678} , { "address" : "3333"} 
            ]
        }
    ]
}; 


function findData(item, target, todo) {
  if (item != null) {
    let array = Object.keys(item) //키값을 가져옴
    if (array != null) {
      for (let i of array) {
        if (i === target) {
          // 키값이 찾고자 하는 키랑 일치하면
          todo(i, item[i], item) //콜백 : 키, 값, 객체
        } else if (item[i]?.constructor === Object) {
          //객체면 다시 순회
          findData(item[i], target, todo)
        } else if (item[i]?.constructor === Array) {
          //배열이면 배열에서 순회
          let miniArray = item[i]
          for (let f in miniArray) {
            findData(miniArray[f], target, todo)
          }
        }
      }
    }
  }
}

findData(json, 'number', (key, value, object)=>{
    console.log(key, value, object)
});

findData(json, 'address', (key, value, object)=>{
    console.log(key, value, object)
});

 

값을 찾을 때 정적(고정적)인 방법으로 사용 한 다면, 만약 데이터가 변경되어버린 상황이 주어졌을 때 기능을 수정하는 상황이 닥치게 되면 해당 문제를 다시만나게 될 수가 있습니다.

1. json.data.number 값 이런 방법으로 데이터를 가져오는 경우로 개발(정적형태)
2. 고객의 요구사항으로 구조 변경
3. json.data.[배열].number 로 구조를 바꾸어야함

 

그러므로 애초에 데이터 구조가 나중에 변하더라도 이에 대응 할 수 있도록 만드는 것이 좋습니다.

데이터를 전부 끝까지 찾아서 결과를 반환 할 때 좋은 방법은 역시나 재귀를 통한 깊이탐색(DFS) 입니다.

물론 데이터가 너무많은 경우라면 정적인 방법을 사용해야겠지요..

 

아래는 제가 작성한 재귀함수와 관련된 내용의 포스팅입니다.

https://lts0606.tistory.com/509

 

자바로 살펴본 재귀 함수의 동작 방법 - 1 (Java Recursive method)

재귀 함수(Recursive method)는 함수(메소드)에서 본인을 다시 호출하는 방법을 의미 합니다. 재귀(Recursive) 호출 방법은 반복문과 비교문을 활용하여 구현해야되기 다소 어려운 기능을 효율적으로 만

lts0606.tistory.com

https://lts0606.tistory.com/502

 

Java Map에서 Map데이터 다루기(자바 Map을 깊이탐색으로)

자바(Java)를 사용하다보면 가장 아쉬운 기능이 Json형식의 데이터를 자유롭게 만들지 못하다는 점 입니다. 아래 json 데이터를 살펴 보겠습니다. let 데이터1 = { "데이터2": { "데이터3": { "가져와서바

lts0606.tistory.com

 

알고리즘을 단순하게 면접용으로만 쓰는 게 아니라 이처럼 개발할 때 조금씩 적용 할 수 있는 범위를 찾아가는 것도 나쁘지 않는 것 같습니다. : - )

간단하게 살펴본 자바스크립트 Json 객체에서 원하는 값 찾기 내용 이였습니다.

궁금한점 또는 틀린부분은 언제든 연락주세요! 👻

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글