Angular - Take data from an json object and put it on a table along with another object

Question

Angular - Take data from an json object and put it on a table along with another object

Navigation

#1 by (0 votes)

0

Hello, I was wondering if anyone could help me, today I have a table that receives data from a component (Media), I have another component that is playlists, in the playlists I associate the media with a playlist.

In the stocking table, I wanted to can show in a column the amount of playlists that media has. But unfortunately I do not understand how to do it, I 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><trrole="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>

javascript typescript angular

asked by anonymous 18.08.2018 / 00:30

1 answer

xmlhttp.open, does not accept subfolders Cancellation of Ionic

score 0 · 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 simply display the length of the array, but you can adjust to perform a sum on a new attribute, "totalPlaylists" for example, and only display directly on the screen.