How to display json array in one column in Datatable?

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?