Group JSON data array to another array

Question

I am building an Angular 7 app. In this app I am fetching JSON data from the server that I then want to group by a specific key. I managed to do this but I then no longer have an array but some kind of an object.

Starting JSON data

[{
    "id": 67,
    "survey_id": 26,
    "question_id": 63,
    "user_id": 35,
    "privacy": null,
    "score": null,
    "comment": "A nice little comment",
    "binary": null,
    "reasons": null,
    "preferences": "{}",
    "created_at_date": "2019-09-18",
    "created_at_time": "19:53",
    "user": {
        "id": 35,
        "fullname": "Michael Palin"
    },
    "can_manage": true
},
{
    "id": 68,
    "survey_id": 26,
    "question_id": 64,
    "user_id": 4,
    "privacy": null,
    "score": null,
    "comment": "Another little comment",
    "binary": null,
    "reasons": null,
    "preferences": "{}",
    "created_at_date": "2019-09-18",
    "created_at_time": "19:53",
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
},
{
    "id": 69,
    "survey_id": 26,
    "question_id": 65,
    "user_id": 4,
    "privacy": null,
    "score": null,
    "comment": "Some more comments",
    "binary": null,
    "reasons": null,
    "preferences": "{}",
    "created_at_date": "2019-09-18",
    "created_at_time": "19:53",
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
},
{
    "id": 70,
    "survey_id": 26,
    "question_id": 66,
    "user_id": 4,
    "privacy": null,
    "score": 5,
    "comment": null,
    "binary": null,
    "reasons": null,
    "preferences": "{}",
    "created_at_date": "2019-09-18",
    "created_at_time": "19:53",
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
}

]

This is my grouping code

setupStats() {
    const groupBy = (array, key) => {
      return array.reduce((result, currentValue) => {
        (result[currentValue[key]] = result[currentValue[key]] || []).push(
          currentValue
        );
        return result;
      }, {});
    };
    const grouped = groupBy(this.collection, 'user_id');
    console.log(grouped);
  }

This is the output

{4: Array(3), 35: Array(1)}

The 4 and 35 is the user_ids. I would like them to get parts of an array so I can loop them, that I cannot do now.

how should the result look like?

Nina Scholz
– Nina Scholz

2019-09-18 20:42:33 +00:00
Commented Sep 18, 2019 at 20:42 — Nina Scholz
– Nina Scholz, Commented Sep 18, 2019 at 20:42
You can find it on "This is the output"

Mark Denn
– Mark Denn

2019-09-18 20:44:25 +00:00
Commented Sep 18, 2019 at 20:44 — Mark Denn
– Mark Denn, Commented Sep 18, 2019 at 20:44
i have seen it, but what do you want?

Nina Scholz
– Nina Scholz

2019-09-18 20:45:32 +00:00
Commented Sep 18, 2019 at 20:45 — Nina Scholz
– Nina Scholz, Commented Sep 18, 2019 at 20:45

Tom Faltesek · Accepted Answer · 2019-09-18 20:49:02Z

1

If you're looking to bind your grouped data to the template with an *ngFor directive, you can leverage the keyvalue pipe to iterate over your grouping object:

<div *ngFor="let group of groupedItems | keyvalue">
  <strong>{{ group.key }} {{ group.value.length }} items</strong>
  <div *ngFor="let item of group.value">
    {{item.id}} {{item.comment}}
  </div>
</div>

You can read about the keyvalue pipe here.

answered Sep 18, 2019 at 20:49

Tom Faltesek

2,8182 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Denn Over a year ago

That worked perfectly! I did not know about keyvalue. Thank you!

Tom Faltesek Over a year ago

Great. Glad it helped.

V. Sambor · Accepted Answer · 2019-09-18 20:49:46Z

1

You can use a simple loop to do this grouping, something like this:

const arr = [{
    "id": 67,
    "survey_id": 26,
    "comment": "A nice little comment",
    "user": {
        "id": 35,
        "fullname": "Michael Palin"
    },
    "can_manage": true
},
{
    "id": 68,
    "survey_id": 26,
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
},
{
    "id": 69,
    "survey_id": 26,
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
},
{
    "id": 70,
    "survey_id": 26,
    "user": {
        "id": 4,
        "fullname": "Roland Smacker"
    },
    "can_manage": true
}];

const map = {};

for(const item of arr) {
  const id = item.user.id;
  if(!map[id]) {
    map[id] = [];
  }
  
  map[id].push(item);
}

// Access specific group by id.
// console.log(map['4']);

// Loops over all the groups.
for(const [id, groupArr] of Object.entries(map)) {
  console.log('id: ' + id);
  console.log('associated array: ', groupArr);
}

edited Sep 18, 2019 at 20:49

answered Sep 18, 2019 at 20:41

V. Sambor

13.4k6 gold badges51 silver badges68 bronze badges

3 Comments

Mark Denn Over a year ago

I need to group on the key (user_id) not a specific ID. How can I modify this code to work with that?

V. Sambor Over a year ago

this is how grouping looks like. You can still loop over the map if you want, why you say you can't ? What exactly do you want to achieve?

V. Sambor Over a year ago

@MarkDenn please check now my answer, I have updated the code to loop over all the groups.

Collectives™ on Stack Overflow

Group JSON data array to another array

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related