Igniteui-angular: Igx-grid when json object has an object or an array inside

Created on 20 Nov 2018 · 11Comments · Source: IgniteUI/igniteui-angular

Description

Could you put in the documentation what to do when you have an array inside of the data array for igx grid, how do you display that ?

this link explains my question, but the answer is poor. in fact it doesnt solve it.

This can easily be implemented with ngfor and tables, but it's hard on igx-grid

Here is my data, how do you display aval (an array property) inside igx-grid ?

Actually I would like to display "start" and "ava". that's it. if I do a ngfor or a map I get [object Object] on my grid

   {
      "EmployeeID": "56250fa57ab1535722e564a6",
      "FirstName": "Downs",
      "LastName": "Holcomb",
      "Country": "Italy",
      "Age": 35,
      "RegistererDate": "07/25/2015",
      "IsActive": false, 
      "aval": [{start: "1", end: "2", ava:"3", health:"4"}]
    },
    {
      "EmployeeID": "56250fa5c0fd04f12555d44d",
      "FirstName": "Mckenzie",
      "LastName": "Calderon",
      "Country": "USA",
      "Age": 26,
      "RegistererDate": "09/22/2014",
      "IsActive": false, 
      "aval": [{start: "5", end: "8", ava:"7", health:"9"}]
    },

Thanks

general question

Source

corganfuzz

All 11 comments

You can do it with formatter like this:

    <igx-grid #grid1 [data]="localData">
        <igx-column width="100px" field="aval" [formatter]="formatAval">
        </igx-column>
    </igx-grid>

```ts
formatAval(value) {
return value[0].start + " " + value[0].ava;
}


Here's a StackBlitz [sample](https://stackblitz.com/edit/angular-6xxpgn)

Or you can do it with cell template:
```html
<igx-column header="aval" headerClasses="myClass" width="100px" field="aval" sortable="true" [filterable]="false">
    <ng-template igxCell let-cell="cell">
        <div class="cell__inner">
            <div *ngFor="let a of cell.value" >{{ a.start }}</div>
        </div>
    </ng-template>
</igx-column>

Here's another StackBlitz sample

mpavlinov on 21 Nov 2018

Thanks @mpavlinov , Your answer helped me a lot , however because of the [0] I only get the first value, so, Im trying different things now but I was thinking more like as extra columns like this. putting it more like this:

<igx-grid #grid1 [data]="localData">
        <igx-column 
                   width="100px" 
                   field="aval" [formatter]="formatAval" 
                   *ngFor="let item of aval.ava">
        </igx-column>
    </igx-grid>

I used an *ngfor in jgx-column, but didnt work

corganfuzz on 22 Nov 2018

@corganfuzz I'm not sure how the extra columns solution should look like, because aval property is an array, so it can contain arbitrary number of objects. You don't know how many extra columns you'll need for each Employee record. Or you need only 2 columns. One for start and one for ava and you'll put all the data from the aval property there?

mpavlinov on 22 Nov 2018

@mpavlinov I'll show it to you simpler

Here's what I want in normal tables ( StackBlitz sample)

Now, I have tried to do this with igx-grid , but it's getting complicated.

<table style="width:100%">
  <thead>
      <th>EmployeeID</th>
      <th>FirstName</th>

    <th *ngFor="let tab of tabs">
      {{tab}}
    </th>
  </thead>
  <tbody>
    <tr *ngFor="let item of localData">
      <td>{{item.EmployeeID}}</td>
      <td>{{item.FirstName}}</td>

      <td *ngFor="let nestedItem of item.aval">
          <span>{{nestedItem.ava}}</span>
      </td>     
    </tr>

  </tbody>
</table>

Pd. I changed the data a lit bit , to make it more understandable

NEW INFO: the value of the headers is given outside the employees object. also the new "timeline" object contains all the "start" values of the whole JSON ( thank god ), which makes it easier for me.

corganfuzz on 23 Nov 2018

@corganfuzz Yes. It's complicated to do this scenario in igxGrid. The easiest solution is to transform your data to flat array and then bind it to the igxGrid.

mpavlinov on 23 Nov 2018

@mpavlinov figured it out myself.

Per @zdrawku I'm opening an issue at @igniteui-docfx where it should be stated what kind of data structure igx-grid takes, at least when it comes to remote data. does it take an array, an object or an array of objects ?

The solution for me here StackBlitz wouldnt been simpler if I knew igx-grid would only take an array of objects when you are trying to generate columns dynamically.

For example, in this data structure, how you even start ? well 2 things to take in consideration.

 "timeline": {
        "timeline_values": [{
          "tag": 0,
          "start": "11-19"
        },
        {
          "tag": 1,
          "start": "11-20"
        },
        {
          "tag": 2,
          "start": "11-21"
        },
        {
          "tag": 3,
          "start": "11-22"
        }
        ]
      },
      "employees": [{
        "EmployeeID": "56250f",
        "FirstName": "Downs",
        "aval": [
          {"start": "11-19","end": "2","ava": "30","health": "4"},
          {"start": "11-20","end": "2","ava": "40","health": "4"},
          {"start": "11-21","end": "2","ava": "50","health": "4"},
          {"start": "11-22","end": "2","ava": "60","health": "4"}
        ]
      },
      {
        "EmployeeID": "46250f",
        "FirstName": "Mckenzie",
        "aval": [
          {"start": "11-19","end": "2","ava": "1","health": "4"},
          {"start": "11-20","end": "2","ava": "2","health": "4"},
          {"start": "11-21","end": "2","ava": "3","health": "4"},
          {"start": "11-22","end": "2","ava": "4","health": "4"}
        ]
      }, {
        "EmployeeID": "56250f",
        "FirstName": "Charles",
        "aval": [
          {"start": "11-19","end": "2","ava": "100","health": "4"},
          {"start": "11-20","end": "2","ava": "200","health": "4"},
          {"start": "11-21","end": "2","ava": "300","health": "4"},
          {"start": "11-22","end": "2","ava": "400","health": "4"}
        ]
      }
      ]
    }

As far as I know, both [headers] , [field] in and [data] in need to be in sync. While it is possible to put 2 data sources for both I would not recommend it, as in you will run in a lot of unnecessary headaches if you do(there might be a way but I dont think this is very efficient for the app).

therefore here is the html:

<div class="grid__wrapper">
    <igx-grid #grid1 [data]="newLocalData" >
        <igx-column
            *ngFor="let c of columns"
            [sortable]="true"
            [filterable]="true"
            [field]="c.tag"
            [header]="c.tag" 
        >
        </igx-column>
    </igx-grid>
</div>

Now let say you would wanna put icons such as a green check mark or something, you just add an extra to this and you are ready to go. Make sure you use the same [data] thing tho.

Now the fun part,

    this.localData = this.localObject.employees;
    const firstLevel = this.localData;
    const result = firstLevel.reduce((r, { EmployeeID, aval}) => [
      ...r,
      ...aval.map(({ start}) => ({tag: start}))
    ], []);

    // console.log(result);

    const unique = result.map(item => item.tag)
    .filter((value, index, self) => self.indexOf(value) === index);
  //  console.log(unique);

    const json = unique.reduce(value => { 
       return unique.map(value => ({tag: value}))
     }, {});
     this.extraheaders = json

     console.log('json', json)

     const res = firstLevel.map(({ EmployeeID, aval }) => (
      Object.assign(
        { EmployeeID },
        ...aval.map(({ start, ava }) => ({ [start]: ava }))
      )
    ));

  //  console.log(res);  
   this.newLocalData = res;


this.columns = [{ tag: "EmployeeID", width: "100px", type: "number" },
                          ...this.extraheaders
                         ]

All this code does is to convert that wacky data above into a data structure igx-grid can understand. (btw, I still need to tune this a lil bit, but I just wanted to work)

Like this:

[
   { header: value, header2: value1, header3, value2, header4: value3 },
   { header: value, header2: value1, header3, value2, header4: value3 },
   { header: value, header2: value1, header3, value2, header4: value3 },
   { header: value, header2: value1, header3, value2, header4: value3 },
   { header: value, header2: value1, header3, value2, header4: value3 },
...and so on 
]

The question is , is this the only data structure igx-grid takes ? , can it take any other ? is there a future plan to make it easier for other users ?. Actually I don't mind doing these transformations, since they are supposed to be at API level anyway but at least I would be nice if this is in the documentation.

corganfuzz on 27 Nov 2018

👍1

@corganfuzz We will describe what data structure igx-grid supports in the docs. I cannot find an issue logged by you in @igniteui-docfx repo. Let me know what the issue number is.

mpavlinov on 7 Dec 2018

@mpavlinov sorry , been busy all week. will do this now.

corganfuzz on 7 Dec 2018

@mpavlinov here you go link

corganfuzz on 7 Dec 2018

👍1

@corganfuzz Thanks!

mpavlinov on 13 Dec 2018

@corganfuzz closing this one as there is a relevant issue logged in docfx repo