nested json data is not displaying in ag grid row data

Question

[![enter image description here][1]][1]

[1]: https://i.stack.imgur.com/dUWq7.png`enter code here

ngOnInit() {

this.reviewService.getAllReviewInGridView().subscribe(response => {




  console.log(response);
  this.agGridOptions = response.data;
  this.rowData = this.agGridOptions.results;
});

}

My response


{
"code":200,
"data":{
"count":"3",
"results":[
{
"CTS":"2020-05-27T06:04:22.595Z",
"UTS":"2020-05-27T06:04:22.595Z",
"type":"PRODUCT",
"rating":5,
"reviewId":"ab0aa881-dbe9-4509-80f1-c23646f04015",
"review":{
"title":"Title",
"description":"Description"
},
"reviewer":{
"firstName":"pavan",
"profileKey":"M00000m0PRFREG2018102347353485UNH001",
"profilePicUrl":"http://192.168.1.65/data/profilepics/M00000m0PRFREG2018102347353485UNH001.png?1568107101870"
},
"attachments":[
{
"url":"/data/reviewAndRating/farmer/attachments/1590559451117.jpeg",
"type":"IMAGE"
}
],
"productImage":"/data/p_images/1589531876689.png",
"productLevel2Id":"03jk",
"productLevel3Id":"03jl",
"productLevel2Title":"Orange",
"productLevel3Title":"Orange",
"sellerProfileKey":"M0002t20PRFREG2020021461717112UNH001"
},
{
"CTS":"2020-05-27T06:26:56.809Z",
"UTS":"2020-05-27T06:26:56.809Z",
"type":"PRODUCT",
"rating":5,
"reviewId":"ead7b6c1-22ed-48b8-96a5-465beb79da13",
"review":{
"title":"Product was good",
"description":"test was more good"
},
"reviewer":{
"firstName":"pavan",
"profileKey":"M00000m0PRFREG2018102347353485UNH001",
"profilePicUrl":"http://192.168.1.65/data/profilepics/M00000m0PRFREG2018102347353485UNH001.png?1568107101870"
},
"attachments":[
{
"url":"/data/reviewAndRating/farmer/attachments/1590560811773.jpeg",
"type":"IMAGE"
}
],
"productImage":"/data/p_images/1589533040417.jpeg",
"productLevel2Id":"03jo",
"productLevel3Id":"03jp",
"productLevel2Title":"Dry Ginger",
"productLevel3Title":"Dry Ginger",
"sellerProfileKey":"M0002t20PRFREG2020021461717112UNH001"
},
{
"CTS":"2020-07-31T05:32:20.756Z",
"UTS":"2020-07-31T05:32:20.756Z",
"type":"PRODUCT",
"rating":4,
"reviewId":"4f1cd487-5264-411f-8303-31bda4374193",
"review":{
"title":"osm",
"description":"testing "
},
"reviewer":{
"firstName":"vikash kumar",
"profileKey":"M0002t20PRFREG2020021461717112UNH001",
"profilePicUrl":"http://192.168.1.65/data/profilepics/M0002t20PRFREG2020021461717112UNH001.png"
},
"attachments":[
{
"url":"/data/reviewAndRating/farmer/attachments/1596173532002.jpeg",
"type":"IMAGE"
}
],
"productImage":"/data/p_images/1594983551128.png",
"productLevel2Id":"03kw",
"productLevel3Id":"03kx",
"productLevel2Title":"XYZ_Shipping Included",
"productLevel3Title":"XYZ_Shipping Included",
"sellerProfileKey":"M00001c0PRFREG2018102638093069UNH001"
}
],
"floatingFilter":false,
"columnDefs":[
{
"headerName":"Product",
"resizable":true,
"field":"productLevel2Title",
"sortable":true,
"filter":false,
"checkboxSelection":false,
"cellRendererFrameworkName":"AgGridSlNoRendererComponent",
"width":275
},
{
"headerName":"Variety",
"resizable":true,
"field":"productLevel3Title",
"sortable":true,
"filter":false,
"checkboxSelection":false,
"cellRendererFrameworkName":"AgGridSlNoRendererComponent",
"width":275
},
{
"headerName":"Reviewed on",
"resizable":true,
"field":"CTS",
"sortable":true,
"filter":"agDateColumnFilter",
"formatter":"AG_GRID_DATE_FORMATTER",
"formatterValue":"dd MMM",
"titleFormatterValue":"dd MMM yyyy, hh:mm:ss a",
"cellRendererFrameworkName":"AgGridDateRendererComponent",
"filterParams":{
"inRangeInclusive":true,
"clearButton":true,
"resetButton":true
},
"width":100
},
{
"headerName":"Reviewer",
"resizable":true,
"field":"authorName",
"sortable":true,
"filter":true,
"filterParams":{
"clearButton":true,
"resetButton":true
},
"width":150
},
{
"headerName":"Rating",
"resizable":true,
"field":"rating",
"sortable":true,
"filter":false,
"checkboxSelection":false,
"cellRendererFrameworkName":"AgGridSlNoRendererComponent",
"width":50
},
{
"headerName":"Review",
"resizable":true,
"field":"review",
"sortable":false,
"filter":false,
"cellRendererFrameworkName":"AgGridReviewRendererComponent",
"width":350
},
{
"headerName":"Attachments",
"resizable":true,
"field":"attachments",
"sortable":true,
"filter":true,
"cellRendererFrameworkName":"AgGridAttachmentsComponent",
"width":150
}
]
},
"info":"List fetched"
}

I want to show attachments, reviewer name , review description as row data, how I could get it?

This how I am currently getting row data.

This how I am currently getting row data. This how I am currently getting row data.

Do you mind cleaning up your questions removing all this repeated phrases? you also might want to let us know what you have done so far. would you mind creating a stackblitz with the problem happening? stackblitz.com/fork/angular-ivy — The Fabio
you need to have some clarity on how you want to render your data on the grid. without that it would be really difficult for people here making sense out of your data. e.g. your attachment object is an array of object so you should know how it would be shown on grid. — sandeep joshi

Moshezauros Moshezauros · Accepted Answer · 2020-11-08T06:42:13

You need to decide how you want to show your data, since those items are objects, you need to change them to something else for them to show.

For example, the review element, you might want to show ${title} - ${description}, if that is the way you choose to show the data, you can do that by using value getters.

this is from the docs:

// example value getter, adds two fields together
colDef.valueGetter = function(params) {
    return params.data.firstName + params.data.lastName;
}

nested json data is not displaying in ag grid row data

1 Answers