오늘도 일하다가 유용한 함수를 정의해두고 미래의 나를 위해서 블로그에 옮겨봅니다.
검색결과를 javascript에서 처리하기 편리한 json 방식으로 전달받아두고
이 json list 목록에서 특정 내용을 검색하기 위한 function을 정의하였습니다.
JSON list 검색 : 특정 필드의 값이 일치하는 JSON Object 추출하기
개발하는 사람마다 정의하는 내용이 일부 다르겠지만 제가 정의한 방식은 아래와 같았습니다.
조회 성공여부, 실패 시 실패사유, 검색결과 Object를 하나의 JSON Object로 선언하고
내부적으로 검색결과 Object는 List 형태로 구성되어 있습니다.
KK {TYPE : "SUCCESS"
MESSAGE : "성공"
KK_LIST : [{SEQ : 1, NAME : "ojava", AGE : 26},
{SEQ : 2, NAME : "dev", AGE : 35},
{SEQ : 3, NAME : "net", AGE : 23},
{SEQ : 4, NAME : "useful", AGE : 31},
....,
{SEQ : 15, NAME : "newbie", AGE : 21}
]
}
위와 같은 JSON Object가 있다고 했을 때, NAME이 ojava인 데이터를 가져와보자.
1) index 조회방식
가장 단순한 방식은 아무래도 반복문을 사용하여 index마다 값을 체크하고 일치하는 object를 반환하는 방식이다.
KK.KK_LIST[0] 이런식으로 index를 지정하여 값을 가져올텐데 값을 가져오기 위해서 아래와 같이 코딩한다.
var dataset = KK.KK_LIST;
$.each(dataset, function (idx, row) {
if (dataset[idx].NAME == "ojava") {
return dataset[idx];
}
return "":
}
특정 key와 value값을 명시해서 값을 추출하는 방식으로 여러번 재사용하지 않는 경우에 위와 같이 사용할 수 있다.
물론 반복문 내부의 반복문을 선언하여 value 값은 다양하게 변경될 수 있을 듯 하나,
검색대상이 되는 key 값의 경우는 고정되어 있을 것으로 생각된다.
2) JSON List 검색용 function 선언
본인의 경우는 JSON List에서 특정 key값에 특정 value값을 가지고 있는 해당 Object를 반환받아서 이를 이용하고자 했다.
검색 대상이 되는 key값은 고정되어도 되나, 향후 사용성을 고려하여 아래와 같이 변경하였다.
물론 검색 성공여부를 가져오는 필드도 꺠알같이 다 이용하였다.
function getListFilter (data, key, value) {if (data.TYPE == "S") {
return data.KK_LIST.filter (function (object) {
return object[key] === value;
});
} else {
alert(data.MESSAGE);
return "";
}
};
굵은 글씨로 강조해 둔 부분이 핵심이니 저 부분만 확인하면 된다.
각자의 List 객체를 filter 앞 부분에 선언하고, jQuery filter 함수를 사용하여 검색한다.
filter 함수는 객체를 내부적으로 순회하면서 검색결과를 반환하는 함수다.
위의 경우는 filter가 수행할 업무로 function을 정의하였다.
값을 전체적으로 순회하면서 각각의 object에서 key값이 value와 일치하는 대상을 검색하고
일치하는 대상이 발견되면 해당되는 object를 반환하는 구조이다.
물론 선언한 함수 내부적으로 있는 내용을 each를 이용한 형태로 변경해도 아무문제없다.
매번 같은 방식으로 구현하는 것보다 다양한 방식으로 구현해봐야 응용력이 생기니까 이것저것 새로운 걸 써보면 좋다.
그래도 each 문으로 구현한 방식도 코딩한게 아까우니 같이 올려본다.
function getListFilter (data, key, value) {var returnObject = "";
if (data.TYPE == "S") {
$.each(data.KK_LIST, function () {
if (this[key] == value) {
returnObject = this;
}
});
} else {
alert(data.MESSAGE);
}
return returnObject;
};
(참고) jQuery api documentation
'PROGRAM > Script Language' 카테고리의 다른 글
[javascript] 변수 선언 방식의 차이 : var name / $name (0) | 2019.05.13 |
---|---|
.prop(), .attr()의 차이 (1) | 2019.01.25 |
MVW (Model-View-Whatever) (0) | 2018.08.22 |
HTML으로 메일 발송 시 CSS 깨짐현상 (0) | 2017.09.01 |
jQuery seletor event 해제하기 / event override (0) | 2016.12.13 |