Angular: group by field while displaying from json using *ngFor

Question

I want to display as group for the crew members by their "Job" from below JSON. for example: Director is one but producers are more than one but want to show like:

producers: producer1, producer2, producer3

Original Music Composer: composer1, composer2

and so on. I want to group them in html view with *ngFor possibly something like

<ul *ngFor="let group of crew">
  <li>{{group.job}}</li>
  <ul>
     <li *ngFor="let crews of group.name">
      {{crews.name}}
     </li>
  </ul>
</ul>

Working demo without grouping: https://stackblitz.com/edit/angular-ttfieu i need to group producer and casting for example in this.

JSON is:

"crew": [
    {
      "credit_id": "56380f0cc3a3681b5c0200be",
      "department": "Writing",
      "gender": 0,
      "id": 7469,
      "job": "Screenplay",
      "name": "Jim Uhls",
      "profile_path": null
    },
    {
      "credit_id": "52fe4250c3a36847f8014a05",
      "department": "Production",
      "gender": 0,
      "id": 7474,
      "job": "Producer",
      "name": "Ross Grayson Bell",
      "profile_path": null
    },
    {
      "credit_id": "52fe4250c3a36847f8014a0b",
      "department": "Production",
      "gender": 0,
      "id": 7475,
      "job": "Producer",
      "name": "Ceán Chaffin",
      "profile_path": null
    },
    {
      "credit_id": "52fe4250c3a36847f8014a11", 
      "department": "Production",
      "gender": 0,
      "id": 1254,
      "job": "Producer",
      "name": "Art Linson",
      "profile_path": "/dEtVivCXxQBtIzmJcUNupT1AB4H.jpg"
    },
    {
      "credit_id": "52fe4250c3a36847f8014a17",
      "department": "Sound",
      "gender": 0,
      "id": 7477,
      "job": "Original Music Composer",
      "name": "John King",
      "profile_path": null
    },
    {
      "credit_id": "52fe4250c3a36847f8014a29",
      "department": "Editing",
      "gender": 0,
      "id": 7480,
      "job": "Editor",
      "name": "James Haygood",
      "profile_path": null
    },
    {
      "credit_id": "52fe4250c3a36847f8014a2f",
      "department": "Production",
      "gender": 0,
      "id": 7481,
      "job": "Casting",
      "name": "Laray Mayfield",
      "profile_path": null
    },

component:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { MoviesService } from '../movies.service';

    @Component({
      selector: 'app-crew',
      templateUrl: './crew.component.html',
      styleUrls: ['./crew.component.css']
    })
    export class CrewComponent implements OnInit {
      movie: Object;
      crew: Array<Object>;

      constructor(
        private _moviesServices: MoviesService,
        private router: ActivatedRoute
      ) {
      }
      ngOnInit() {
        this.router.params.subscribe((params) => {
          const id = params['id'];
          this._moviesServices.getMovie(id).subscribe(movie => {
            this.movie = movie;
          });
          this._moviesServices.getMovieCredits(id).subscribe((res: any) => {
            res.crew = res.crew.filter((item) => { return item.job });
            console.log(res)
            this.crew = res.crew;
          });
    })
  }
}

html templare is:

<div class="row mt-3" *ngIf="crew && crew.length > 0">
<div class="col">
    <h3>Crew</h3>
    <div class="row flex-nowrap overflow-auto">
        <div class="col-lg-3 col-4 col-md-3 col-sm-2" *ngFor="let actor of crew">
            <div class="card bg-dark">
                <a routerLink="/crew/{{actor.id}}">
                    <img *ngIf="actor.profile_path" src="https://image.tmdb.org/t/p/w500/{{actor.profile_path}}"
                        alt="{{actor.name}}" class="card-img-top">
                    <img *ngIf="!actor.profile_path" src="../../assets/noimage.png" alt="{{actor.name}}"
                        class="card-img-top">
                    <div class="card-body">
                        <span class="text-white"> {{actor.name}}</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

thank you in advance

you could filter the resposne by job. For exampel, this.producers = res.filter(c => c.job.toLowerCase() === 'producer'); and likewise do the same for composers. — Jason White
– Jason White, Commented Sep 1, 2019 at 20:57
i am looking for angular 2 onward possible solution using ngFor grouping — RRPANDEY
– RRPANDEY, Commented Sep 2, 2019 at 9:41

JossFD · Accepted Answer · 2019-09-03 00:19:10Z

2

Edited to have job value as property key of the grouped object

Try using this and grouping by job:

function groupBy(collection, property) {
   var i = 0, val, index,
        values = [], result = [];
    for (; i < collection.length; i++) {
        val = collection[i][property];
        index = values.indexOf(val);
        if (index > -1)
            result[val].push(collection[i]);
        else {
            values.push(val);
            result[val] = [];
            result[val].push([collection[i]]);
        }
    }
    return result;
}

var obj = groupBy(yourArray, "job");

Refer to this SO post: javascript | Object grouping

Here's a working example on StackBlitz

edited Sep 3, 2019 at 0:19

answered Sep 1, 2019 at 23:35

JossFD

2,2241 gold badge10 silver badges28 bronze badges

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

9 Comments

RRPANDEY Over a year ago

thanks for the response; i want to do this in angular view using ngFor.

JossFD Over a year ago

I added a Stackblitz link to the answer. let me know if that's any good

JossFD Over a year ago

Don't know what you're trying to do when filtering res.crew. Try to provide a Stackblitz of your actual scenario. Also, this is getting away from your original question, as I believe the answer I gave does answer it.

RRPANDEY Over a year ago

Fixed it, Thank you so much and sorry for confusion. This is what i just wanted to do: this.obj = this.groupBy(res.crew, "job");

JossFD Over a year ago

Glad you figured it out yourself :) It's always better when you manage to get it to work by understanding it yourself!

|

Collectives™ on Stack Overflow

Angular: group by field while displaying from json using *ngFor

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related