Javascript / Json 데이터를 Filter, Map 하기

 

오늘 일이 정말 없어서 생산적인 거라도 하나 해보려고 블로그 작성하기

코드콤보에 사용되는 코드 데이터는 보통 json 형식으로 되어 있는데, 간혹 json 데이터 중 일부만 필터링 해야 하거나 명칭을 변경해줘야 할 일이 있다. 그래서 다른사람 코드를 훔치다가 알게된 filter, map 함수를 정리해봤다.

(사실 원래 코드에는 filter, map 안에서 elem => elem.group 이런식으로 되어있어서 무슨 소린지 이해를 못했었는데 정리하다 보니 이는 함수를 다르게 표현하는 방법 중 하나라고 한다. ** 화살표함수!

화살표 함수로도 바꾼 내용을 남기고 싶었는데 오늘은 일단 퇴근해야 하니까... ㅎㅎ function으로 시작하는 일반 함수로 된 내용만 남겨본다.)

 

 

 

// 샘플 json 데이터 준비

const smplJson = [

    {'group': 'A', 'data':'A1'},

    {'group': 'B', 'data':'B1'},

    {'group': 'B', 'data':'B2'},

    {'group': 'C', 'data':'C1'},

    {'group': 'A', 'data':'A2'},

    {'group': 'B', 'data':'A3'},

    {'group': 'A', 'data':'A4'}

];

 

console.log("1. 샘플 Json 출력");

console.log(smplJson);

 

 

 

Console 출력결과 🔻

1. 샘플 Json 출력 [   { group: 'A', data: 'A1' },   { group: 'B', data: 'B1' },   { group: 'B', data: 'B2' },   { group: 'C', data: 'C1' },   { group: 'A', data: 'A2' },   { group: 'B', data: 'A3' },   { group: 'A', data: 'A4' } ]

// Json 데이터의 특정 key 값으로 필터링하기

let filteredJson = smplJson.filter(

                        function(jsonElem){

                            return jsonElem.group == 'B'

                        });

console.log("2. Json 데이터의 'group'이 'B'인 항목만 필터링");

console.log(filteredJson);

 

 

Console 출력결과 🔻

2. Json 데이터의 'group'이 'B'인 항목만 필터링 [   { group: 'B', data: 'B1' },   { group: 'B', data: 'B2' },   { group: 'B', data: 'A3' } ]

 

// Json 데이터 매핑하기 1. key명을 'group' -> 'NAME', 'data' -> 'VALUE'로 매핑

let mappedJson = smplJson.map(

        function(jsonElem){

            return {'NAME'  : jsonElem.group,

                    'VALUE' : jsonElem.data

                   }

        });

console.log("3-1. Json 데이터 매핑 : Key명 변경")

console.log(mappedJson);

 

Console 출력결과 🔻

3-1. Json 데이터 매핑 : Key명 변경 [   { NAME: 'A', VALUE: 'A1' },   { NAME: 'B', VALUE: 'B1' },   { NAME: 'B', VALUE: 'B2' },   { NAME: 'C', VALUE: 'C1' },   { NAME: 'A', VALUE: 'A2' },   { NAME: 'B', VALUE: 'A3' },   { NAME: 'A', VALUE: 'A4' } ]

 

 

// Json 데이터 매핑하기 2. value만 리턴

let mappedJson2 = smplJson.map(

        function(jsonElem){

            return jsonElem.data;

        });

console.log("3-2. Json 데이터 매핑 : value만 리턴")

console.log(mappedJson2);

 

Console 출력결과 🔻

3-2. Json 데이터 매핑 : value만 리턴 [   'A1', 'B1',   'B2', 'C1',   'A2', 'A3',   'A4' ]

 

// 필터링과 매핑을 동시에 적용하기

let filteredAndMappedJason = smplJson

    .filter(

        function(jsonElem){

            return jsonElem.group == "A";

        })

    .map(function(jsonElem){

        return {

            'NAME': jsonElem.group,

            'VALUE' : jsonElem.data

        }

    });

console.log("4. Json 데이터 'group'이 'A'인 요소만 필터링 후 매핑하기")

console.log(filteredAndMappedJason);

 

Console 출력결과 🔻]

4. Json 데이터 'group'이 'A'인 요소만 필터링 후 매핑하기 [   { NAME: 'A', VALUE: 'A1' },   { NAME: 'A', VALUE: 'A2' },   { NAME: 'A', VALUE: 'A4' } ]

 

 

// smplJson.filter(jsonElem => jsonElem.group == 'B');