HTML Grouping JSON by values

2019.03.13 05:44

졸리운_곰 조회 수:382

Grouping JSON by values

 

Assume , the JSON output is

outJSON= 
 [ {
      team: "TeamA",
      name: "Ahmed",
      field3:"val3"
  }, 
{
      team: "TeamB",
      name: "Ahmed",
      field3:"val43"
  }, 
{
      team: "TeamA",
      name: "Ahmed",
      field3:"val55"
  }, 


]

Then see the groupBy function in the DEMO below:


DEMO :

 

outJSON= [ {team: "TeamA",name: "Ahmed",field3:"val3"}, {team: "TeamB",name: "Ahmed",field3:"val43"}, {team: "TeamA",name: "Ahmed",field3:"val55"} ]

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};
var groubedByTeam=groupBy(outJSON, 'team')
console.log(groubedByTeam);

 

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

Then , if you want to loop through categories (teams), get all categories in array :

Object.keys(groubedByTeam) // return ["TeamA","TeamB"]

then :

  Object.keys(groubedByTeam).forEach(function(category){

       console.log(`Team ${category} has ${groubedByTeam[category].length} members : `);
        groubedByTeam[category].forEach(function(memb,i){
              console.log(`---->${i+1}. ${memb.name}.`)
       })
  }); 

 

[출처] https://stackoverflow.com/questions/38575721/grouping-json-by-values

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
343 How to trigger a file download when clicking an HTML button or JavaScript 졸리운_곰 2019.03.24 366
342 ADD/REMOVE CLASSES WITH RAW JAVASCRIPT 19 May 2010 2 min read By Jake Trent In Posts 졸리운_곰 2019.03.24 500
341 How can I use jQuery to make an input readonly? 졸리운_곰 2019.03.24 320
340 jQuery.isEmptyObject() 졸리운_곰 2019.03.24 793
339 Merge and split table cells with JavaScript file 졸리운_곰 2019.03.23 503
338 How can I detect if a selector returns null? 졸리운_곰 2019.03.23 296
337 테이블 태그 셀 합치기 그리고, 테이블 안 테이블 file 졸리운_곰 2019.03.23 566
336 테이블 컬럼 너비 고정 : Fixed Table Cell Width 졸리운_곰 2019.03.21 767
335 DIV 가로 중앙정렬과 세로 중앙정렬 방법 file 졸리운_곰 2019.03.20 498
334 How do I test for an empty JavaScript object? 졸리운_곰 2019.03.19 617
333 Javascript 자바스크립트 NaN (숫자)인지 체크 file 졸리운_곰 2019.03.19 356
332 css - position (static, relative, absolute, fixed 차이) 졸리운_곰 2019.03.16 414
331 포지션 css - position (static, relative, absolute, fixed 차이) 졸리운_곰 2019.03.16 496
» Grouping JSON by values 졸리운_곰 2019.03.13 382
329 Grouping Array Data — JSON file 졸리운_곰 2019.03.13 359
328 스크롤 따라 움직이는 레이어 졸리운_곰 2019.03.12 422
327 ECMAScript 6: maps and sets 졸리운_곰 2019.03.11 349
326 jquery 자식 노드 찾고. 갯수 알아 보고, 동적 추가 하고...class 명도 찾아 보자.. 졸리운_곰 2019.03.10 281
325 [jQuery]요소를 추가하는 메소드(append, prepend, after, before) 졸리운_곰 2019.03.10 575
324 jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드 file 졸리운_곰 2019.03.10 587
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED