How to display nested array in extjs grid cell

Question

I'm trying to loop through a nested json array to display values in a grid cell (using extjs 6.0).

Here is the column in the view:

{
    header: 'Participants',
    dataIndex: 'participants'   
},

The model:

Ext.define('App.model.Event', {
    extend: 'Ext.data.Model',

    fields: [

        { name: 'eventTypeName', type: 'auto', mapping: 'eventType.eventType' },

        // this only grabs the first object in the list....how to grab all?
        { name: 'participants', type: 'auto', mapping: 'participants[0].participantName' },


    ]
});

And the json:

{
  "_embedded" : {
    "events" : [ {
      "participants" : [ {
        "participantId" : 1,
        "participantName" : "name1"
      }, {
        "participantId" : 2,
        "participantName" : "name2"
      }, {
        "participantId" : 3,
        "participantName" : "name3"
      } ],

    }
  }
}

The rows in the grid are the events, and each event row will have multiple participants that I want to display in a cell. How can all of the participant names be displayed in a single cell?

I've tried something similar to this post using the hasMany method, to no avail: https://www.sencha.com/forum/showthread.php?205509-Displaying-a-hasMany-model-relationship-in-a-Grid&p=822648&viewfull=1#post822648

Can you give an example of what you want it to look like in the cell? Do you just want a comma-separated list of the participant names? — GreenGiant

GreenGiant GreenGiant · Accepted Answer · 2015-08-21T17:35:54

If you want to display special content in a cell, then you'll need to implement a renderer. In the renderer function, you would iterate over your participants for the current row, building and returning an HTML string based on what you want that cell to look like.

How to display nested array in extjs grid cell

1 Answers