javascriptgridjs

How to add multiple objects in a cell?

Hope you are doing great!.

I have to insert multiple records in the same cell using gridjs. Can someone help me with that?

Let's say here is my sample response from my api

{"results": [{"Program": "Sample Program", "Show": "Sample Show Hello", "Edition": 
"Edition Name", "Venue": "Venue Name", "Start_Time": "Start Time", "End_Time": "End 
Time", "Partner": "Partner", "Artist": ["Artist 1", "Artist 2"]}]}

As you can see I have multiple artists. Now here is my Grid code

var x = new gridjs.Grid({
  columns: ["Program","Show","Edition", "Venue", "Start Time","End Time","Partner","Artist"],
  pagination: {
    limit: 4
  },
  search: true,
  sort: true,
  server:{
    url: 'http://127.0.0.1:8003/1/',
    then: data => data.results.map(show => 
      [show.Program, show.Show, show.Edition,show.Venue,show.Start_Time,show.End_Time,show.Partner,show.Artist]
    )
  },
}).render(document.getElementById("wrapper"));

and the grid displays artist 1 and artist 2 in the same column. Please see the reference image.

Image reference

In my cell I need output like Artist 1
Artist 2

I would really appreciate any leads!

Solution

  • Tack a .toString() on the end of show.Artist and it will turn the array into a comma-delimited string. Do .toString().replace(',' '\n') and it will break them out onto separate lines.

    I maintain gridjs-vue by the way. 😅