[JavaScript] Object(객체)에서 원하는 key, value 얻기

안녕하세요.

오늘은 삽질 끝에 성공한 객체 관련 포스트를 끄적여보려고 합니다.

 

[사용자 요구사항]

1. 테이블 리스트에 페이징 적용되어있음

2. jQuery만을 이용해 테이블내 검색 >> 이는 td의 value 체크

3. 테이블내 검색이 아닌 전체 데이터 검색 >> table에 적용되는 데이터 전체를 체크 

 

하여간 요구사항을 정리해보자면 객체의 value를 통해 해당 객체를 리턴하는 것이었는데요.

데이터가 상당히 복잡하게 되어있어 하루동안 삽질을 했습니다.

 

관련 메서드 먼저 정리하도록 하겠습니다.

Object.keys() 

객체의 key값을 배열로 리턴하는 함수

Object.values()

객체의 value를 배열로 리턴하는 함수

Object.entries()

객체의 key, value를 배열로 리턴하는 함수

Array.prototype.find()

배열에서 찾고자하는 요소가 있으면 첫 요소를 리턴하는 함수 / 바로 메서드 종료

Array.prototype.filter()

 배열에서 각 요소를 순회하며 callback함수를 실행하고 조건에 맞는 요소만을 배열로 리턴하는 함수

Array.prototype.includes()

배열에서 찾고자하는 요소를 포함하고 있는지의 여부를 boolean값으로 리턴하는 함수

Array.prototype.indexOf()

배열에서 찾고자하는 요소가 있으면 첫번째 인덱스를 리턴하는 함수 / 없으면 -1을 리턴함

 

우선 데이터는 오브젝트 타입이었고 그 안에 배열과 오브젝트로 존재했습니다. ex) { list : [ { } , { } , { } .....{ } ] }

 

 

차근차근 코드를 적어나가보면

우선 엔터키가 눌렸을 때의 이벤트로는 

window.event.keyCode == 13

 

obj.filter(e => Object.values(Object.values(e)).includes(searchVal));

검색된 객체만을 이용해 다시 테이블 내의 데이터를 empty하고 페이징처리하는 순서를 밟았습니다.

 

미천한 글쓰기 실력으로 더이상은 설명이 불가합니다.

 

 

감사합니다..