Angular - Take data from a json Object and put into a table together with another Object

Question

Hi, I was wondering if someone could help me, today I have a table that receives data from a Komponent(Medias), I have another Component that is playlists, on playlists I associate the medias to a playlist.

In the medias table, I wanted can show in a column the amount of playlists that media has. But unfortunately I’m not understanding how to do, already pulled the data from the playlists to make the association.

Component:

@Input('table-data')
public tableData: MediaModel[] = [];
@Input('table-data2')
public tableDataPl: PlaylistModel[] = [];

public data2Render: MediaModel[] = [];
public data2RenderPl: PlaylistModel[] = [];

ngOnChanges(changes: SimpleChanges) {
    if (changes['tableData']) {
        if (!changes['tableData'].firstChange) {
            this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
                dtInstance.destroy();
                this.data2Render = changes['tableData'].currentValue;
                this.dtTrigger.next();
            });                             
        }
    }       

    if (changes['tableDataPl']) {
        if (!changes['tableDataPl'].firstChange) {                          
            console.log(this.tableDataPl.map(x => x.itens));                
        }
    }  
}

Console.log:

html:

            <thead>
            <tr role="row">
                <td>Nome da Mídia</td>
                <td>Tipo de Mídia</td>
                <td>Ações</td>
                <td>PlayList Quantidade</td>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let media of data2Render; let i = index">
                <td>{{ media.filename }}</td>
                <td>{{ getMediaType(media.file_type) }}</td>
                <td>??????????</td>
            </tr>
            </tbody>

Answer 1

I believe that by creating a grouping function you can solve your problem.

Example:

var list = [
    {name: "1", lastname: "foo1", age: "16"},
    {name: "2", lastname: "foo", age: "13"},
    {name: "3", lastname: "foo1", age: "11"},
    {name: "4", lastname: "foo", age: "11"},
    {name: "5", lastname: "foo1", age: "16"},
    {name: "6", lastname: "foo", age: "16"},
    {name: "7", lastname: "foo1", age: "13"},
    {name: "8", lastname: "foo1", age: "16"},
    {name: "9", lastname: "foo", age: "13"},
    {name: "0", lastname: "foo", age: "16"}
];

Expected result grouped by lastname:

var result = [
    [
        {name: "1", lastname: "foo1", age: "16"},
        {name: "5", lastname: "foo1", age: "16"}, 
        {name: "8", lastname: "foo1", age: "16"}
    ],
    [
        {name: "2", lastname: "foo", age: "13"},
        {name: "9", lastname: "foo", age: "13"}
    ],
    [
        {name: "3", lastname: "foo1", age: "11"}
    ],
    [
        {name: "4", lastname: "foo", age: "11"}
    ],
    [
        {name: "6", lastname: "foo", age: "16"},
        {name: "0", lastname: "foo", age: "16"}
    ],
    [
        {name: "7", lastname: "foo1", age: "13"}
    ]         
];

This is a possible solution:

function groupBy( array , f )
{
  var groups = {};
  array.forEach( function( o )
  {
    var group = JSON.stringify( f(o) );
    groups[group] = groups[group] || [];
    groups[group].push( o );  
  });
  return Object.keys(groups).map( function( group )
  {
    return groups[group]; 
  })
}

var result = groupBy(list, function(item)
{
  return [item.lastname, item.age];
});

In this case you are grouping and just display the length of the array, but you can adjust to perform a sum on a new attribute, "totalPlaylists" for example, and only display on the screen directly.