어떤 개발자 커뮤니티 사이트에서 매번 같은 내용을 올리시는분이 있었습니다.
특정 데이터 값이 아래와 같이 존재할 때 해당 값을 찾는 기능을 필요로 하셨었습니다..흠...
아래 코드는 원하는 데이터를 찾는 함수샘플코드 입니다.
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
https://lts0606.tistory.com/502
알고리즘을 단순하게 면접용으로만 쓰는 게 아니라 이처럼 개발할 때 조금씩 적용 할 수 있는 범위를 찾아가는 것도 나쁘지 않는 것 같습니다. : - )
간단하게 살펴본 자바스크립트 Json 객체에서 원하는 값 찾기 내용 이였습니다.
궁금한점 또는 틀린부분은 언제든 연락주세요! 👻
반응형
'Javascript > [기초] Javascript' 카테고리의 다른 글
Javascript 에니메이션 (svg, canvas, gif)의 렌더링 (0) | 2023.01.13 |
---|---|
Javascript for in 반복문 (0) | 2022.06.20 |
Javascript 프로퍼티 정의하기 (0) | 2022.06.20 |
Javascript new 연산자 없이 호출되기 방지 (0) | 2022.06.15 |
Javascript Map 객체 문자로 변경(Javascript map object stringfy) (0) | 2022.05.26 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글