Ag grid: Array object values is not displaying properly

Question

How to load the following array object mark "name" values in cell.

Here the object looks like

 {
      id: "1"
      mark: [
        0: {name: "AUS", id: 1000}
        1: {name: "BRA", id: 1050}
        2: {name: "CHN", id: 1100}
        3: {name: "ECE", id: 1200}
        4: {name: "EG", id: 1250}
        5: {name: "JAP", id: 1450}
        6: {name: "RUS", id: 1500}
      ]
    }

HTML

<ag-grid-angular #agGrid style="width: 100%; height: 100%;" id="myGrid" class="ag-theme-balham cis-ag-grid"
      [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowSelection]="rowSelection" [rowData]="rowData"
      [context]="context" [frameworkComponents]="frameworkComponents" (selectionChanged)="onSelectionChanged()"
      (rowClicked)='onRowClicked($event)' (gridReady)="onGridReady($event)" [gridOptions]="gridOptions">
    </ag-grid-angular>

TS Inside constructor (),

this.defaultColDef = {
      resizable: true,
      sortable: true,
      filter: true,
      headerComponentParams: { menuIcon: 'fa fa-filter' }
    };

this.columnDefs = [  
{
  headerName: "ID",            
  minWidth: 144,
  field: "id", 
  valueGetter: "data.id"
},
{
  headerName: "Mark",            
  minWidth: 144,
  field: "mark", 
  valueGetter: "data.mark.name"
}];

currently, It is displaying in grid column cell like,

ID        Mark
--------------
1         [object Object], [object Object], [object Object], [object Object], 
          [object Object], [object Object], [object Object]

Expected is,

ID        Mark
  --------------
   1       AUS, BRA, CHN, ECE, EG,JAP,RUS

Show the HTML file and component code

Shashank Vivek
– Shashank Vivek

2019-07-18 04:45:08 +00:00
Commented Jul 18, 2019 at 4:45 — Shashank Vivek
– Shashank Vivek, Commented Jul 18, 2019 at 4:45
Updated the post with expected result

klmuralimohan
– klmuralimohan

2019-07-18 04:47:57 +00:00
Commented Jul 18, 2019 at 4:47 — klmuralimohan
– klmuralimohan, Commented Jul 18, 2019 at 4:47
Hi, I am asking about .html and .ts file.

Shashank Vivek
– Shashank Vivek

2019-07-18 04:49:42 +00:00
Commented Jul 18, 2019 at 4:49 — Shashank Vivek
– Shashank Vivek, Commented Jul 18, 2019 at 4:49
Updated the post HTML and ts

klmuralimohan
– klmuralimohan

2019-07-18 05:22:38 +00:00
Commented Jul 18, 2019 at 5:22 — klmuralimohan
– klmuralimohan, Commented Jul 18, 2019 at 5:22

FrontEnd-er · Accepted Answer · 2019-07-18 08:48:22Z

2

Try to this for Ag-grid.

Set Column:-

constructor() {
 this.columnDefs = [                    
  {
    headerName: 'Id', sortable: true, resizable: true, valueGetter: 'data.mark.id'
  },
  {
    headerName: 'Mark', sortable: true, resizable: true, valueGetter: 'data.mark.name'
  }
 ]
}

In typescript file :-

public dataMarkList:any;

constructor() {

}

yourGetFunction() {
   this.dataMarkList = data.mark
}

And set rowData properties in ag-grid like

<ag-grid-angular class="ag-theme-material" style="width: 100%; height: calc(100vh - 200px);" rowSelection="single"
   animateRows="true" [rowHeight]="43" [columnDefs]="columnDefs" rowModelType="infinite"
   paginationPageSize="50" [rowData]="dataMarkList">
</ag-grid-angular>

edited Jul 18, 2019 at 8:48

answered Jul 18, 2019 at 5:12

FrontEnd-er

6734 silver badges14 bronze badges

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

1 Comment

klmuralimohan Over a year ago

Can you please provide right code for this [rowData]="dataMarkList". This is not working. Also column filter data is not updating based on the grid data.

Shashank Vivek · Accepted Answer · 2019-07-18 04:51:28Z

1

Since there isn't any HTML code provided, you can try:

<span *ngFor="let obj of data.mark">
 {{ obj.name }},
</span>

inside that HTML column.

It's coming as [object Object] because it an object ({name: "AUS", id: 1000}). You can visualize it by putting pipe as | json in {{ obj | json }}

answered Jul 18, 2019 at 4:51

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

1 Comment

klmuralimohan Over a year ago

I'm using ag grid directive. Not the html

prabhat.mishra2812 · Accepted Answer · 2019-07-18 05:10:35Z

0

there is no html provided so a reproducible plunker or stackblitz will help. Try like this:

<div *ngFor="let data of dataList">
     <span *ngFor="let item of data.mark">
        {{ item .name }},
      </span>
 </div>

answered Jul 18, 2019 at 5:10

prabhat.mishra2812

3292 silver badges6 bronze badges

1 Comment

klmuralimohan Over a year ago

Update the post. I'm using ag-grid directive.

fred · Accepted Answer · 2020-11-16 23:53:54Z

I used Cell Renderer to accomplish this. I use Vue not Angular. This is how I did it in Vue.

I created a Cell Renderer component file called CellRenderList.vue and imported it into the parent. For defining the field in the parent file I did.

headerName: 'SomeName',
field: 'mark',
cellRendererFramework: 'CellRendererList',

Importing the component and adding that cell renderer line should be the only thing you need to do on your original file.

My CellRenderList.vue component file looks like this.

<template>
 <div class="">
  <span v-for="(value, index) in mark">
    <span v-if="index != 0">, </span><span>{{ value.name }}</span>
  </span>
 </div>
</template>

<script>
  export default {
    name: 'CellRendererList',
    computed: {
      mark() {
        return this.params.data.mark
      }
    }
  }
</script>

The Ag Grid documentation on Cell Renderer has some good examples how to do it in Angular.

sonal jain · Accepted Answer · 2023-01-02 19:11:54Z

0

this.columnDefs = [  
{
  headerName: "ID",            
  minWidth: 144,
  field: "id",
},
{
  headerName: "Mark",            
  minWidth: 144,
  field: "mark", 
  valueGetter: (row: any) => {
        return row.data.mark.name;
      },
}];

answered Jan 2, 2023 at 19:11

sonal jain

141 bronze badge

Comments

Felipe Morales Aliaga · Accepted Answer · 2024-01-13 01:35:13Z

0

this works for me:

{
  headerName: 'SomeName',
  field: 'mark',
  valueGetter: (row: any) => {
    return row.data.mark.map((mark: any) => profile.name);
  },
},

answered Jan 13, 2024 at 1:35

Felipe Morales Aliaga

492 bronze badges

Collectives™ on Stack Overflow

Ag grid: Array object values is not displaying properly

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related