How to display json array in one column in Datatable?

degeta10

Below is the data I'm trying to display in a datatable. As you can see permitbrands is a json array and i want to display it in one column. If it was json object it would have been easier but this is json array.

{
 id: 1,
 total_cases: 13,
 permitbrands: [
       {
         id: 1,
         br_name: "Apple",
         br_no: "12",
         permit_id: 1,
       },
       {
         id: 2,
         br_name: "Mango",
         br_no: "36", 
         permit_id: 1,
        }
  ],
}

Below is my code for datatable column:

$(document).ready( function () {
    table = $('.table').DataTable({
        processing: true,
        serverSide: true,
        paging:true,
        ajax : '/permits/search',
        columns: [
               { data: 'total_cases', name: 'total_cases'},
               {
                data: 'permitbrands[,].br_name',
               },
        ],
    });

});

But The result shown is Apple,Mango.

I want to show the value in column as Apple 12 , Mango 36.

How can this be done? Can anyone please suggest me a solution.?

I tried looping it but it gets looped twice.

{
    data: 'permitbrands[]',
          render: function ( data , row ) {
                  var output='';
                   $.each(data, function(index,item) {
                    alert(index);
                    output+= data[index].br_no+' '+data[index].br_name;
                  });
                 return output;
               }
    },

The result i get is like this:

12 12 Apple , 36 36 Mango.

I dont know why this happens. But looping shows me alert 4 times instead of 2.
What should i do?

colin

Hi @degeta10 ,

This page here should help.

Try changing

        ajax : '/permits/search',
        columns: [
               { data: 'total_cases', name: 'total_cases'},
               {
                data: 'permitbrands[,].br_name',
               },
        ],

to

        ajax : {
               url: '/permits/search',
               dataSrc: 'permitbrands'
        },
        columns: [
               { data: 'br_name'},
               { data: 'br_no' },
        ],

Note, I haven't tried this as no working code to use, but if it doesn't work, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

degeta10

It is working well in Link, I dont know why. But the alert in my project is run twice. And so a duplicate value appears in the output. What could be the reason?

degeta10

Sorry i solved the issue. There was a problem with my json data i was receiving form my ajax and now i solved it. sorry for posting a bad question