Grouping Array Data — JSON

CASE: We want to reorganise a JSON Array i.e. Sort Array items into groups

 

Suppose the following:

  1. You have created an array.
  2. This array has all the information you require.
  3. However you forgot to group the information.

In other words, you have something like this:

 
Original Array

But you want something like this:

 

How can this be done?

This can be done via the combination of 4 functions:

1. groupBy

2. mapValues

3. map

4. omit

groupBy, mapValues and omit are available in the js library lodash.

1. Grouping the players array:

_.groupBy(players, "team");

This applies lodash’s groupBy function to the players array using the property team

Quotation marks are important

Here’s a different way to look at this function:

const Array = players;
const Property = "team";
const playersByTeam = _.groupBy(Array, Property);

No matter which way you choose to do it, the result will be:

 
Newly Created Object

This may look good but our problem here is that the need for the teamproperty has been eliminated, so the team property in the newly created object is a waste of space.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

In a large application, keeping the team property would be wasting a lot of space and filling the application with data that has become irrelevant.

2. Mapping Values

The following is an example of how we might use _.mapValues

_.mapValues(playersByTeam, x => "foo");

This will get each object in playersByTeam and change it to “foo”

 

In our case we don’t want to change it to “foo”, we want to change it to an object that does not contain the team property.

3. Map

_.mapValues(playersByTeam, x => x.map(y => "bar"));

If we run this in the console we can see:

 

This means we can create an object {} based on playersByTeam and change the array [] in the object.

4. Omit

The _.omit function creates an object without a certain property, in our case, the property is team.

_.mapValues(playersByTeam, x => x.map(y => _.omit(y, 'team') ));
 

That’s the console version of:

 

In conclusion,

to create a reorganised array without the team property you need

_.mapValues(_.groupBy(players, "team"), x => x.map(y => _.omit(y, "team") ));

 

[출처] https://codeburst.io/grouping-array-data-json-ef96b438b927

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
154 How do I test for an empty JavaScript object? 졸리운_곰 2019.03.19 617
153 Javascript 자바스크립트 NaN (숫자)인지 체크 file 졸리운_곰 2019.03.19 356
152 css - position (static, relative, absolute, fixed 차이) 졸리운_곰 2019.03.16 414
151 포지션 css - position (static, relative, absolute, fixed 차이) 졸리운_곰 2019.03.16 496
150 Grouping JSON by values 졸리운_곰 2019.03.13 382
» Grouping Array Data — JSON file 졸리운_곰 2019.03.13 358
148 ECMAScript 6: maps and sets 졸리운_곰 2019.03.11 349
147 [jQuery]요소를 추가하는 메소드(append, prepend, after, before) 졸리운_곰 2019.03.10 575
146 jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드 file 졸리운_곰 2019.03.10 585
145 How do you convert a jQuery object into a string? 졸리운_곰 2019.03.10 454
144 Comparing a Text Element and a String 졸리운_곰 2019.03.10 319
143 How to check whether a string contains a substring in JavaScript? 졸리운_곰 2019.03.10 366
142 JQuery 오브젝트 셀렉트한 select object의 내용 확인 졸리운_곰 2019.03.10 600
141 자바스크립트 세번째 - 배열 (2차원배열), for/in 문 file 졸리운_곰 2019.03.09 498
140 HOW TO USE JQUERY TO SORT AND REORGANIZE YOUR CONTENT : jquery html 정렬 sort file 졸리운_곰 2019.03.09 323
139 jquery로 html의 내용이 변경 되었을때 텍스트 내용 가져오기 질문 드립니다. file 졸리운_곰 2019.03.09 324
138 자바스크립트 – 객체안에 값이 있는지 여부 졸리운_곰 2019.03.08 481
137 브라우저 현재 작업창 닫기 졸리운_곰 2019.03.07 477
136 document.write: HTML 웹페이지에 글쓰기(문자열 출력) 예제 졸리운_곰 2019.03.07 271
135 jQuery를 사용하여 텍스트 변경하기 졸리운_곰 2019.03.07 280
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED