I have a js inside a jsp from where I want to send a json in another js.

In jsp the console.log(html_out); prints the json right.

{ title: "hello1", name: "nam1" },{ title: "hello2", name: "nam2" }

But, in js the json doesn't put the data right inside the table i want to put them. The console.log(rowData); displays :

 { 
 t
 i
 t
 l
 e
 :
 "
 h
 ...
 ...

Here is my code in the js that i want to print my json:

function drawTable(data){

for (var i=0; i<data.length; i++){
    drawRow(data[i]);
}
}
function drawRow(rowData) {
   console.log(rowData);
var row = $("<tr />")
$("#farmacyDataTable").append(row);
row.append($("<td>" + rowData.title + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));

}

I have a js inside a jsp from where I want to send a json in another js.

In jsp the console.log(html_out); prints the json right.

  $.ajax({
     //ajax code
     },
        async: true
    })
    .done(function(html_out) {
        console.log(html_out);
        drawTable(html_out);

    })

Output for console.log(html_out):

{ title: "hello1", name: "nam1" },{ title: "hello2", name: "nam2" }

But, in js the json doesn't put the data right inside the table i want to put them. The console.log(rowData); displays :

 { 
 t
 i
 t
 l
 e
 :
 "
 h
 ...
 ...

Here is my code in the js that i want to print my json:

function drawTable(data){

for (var i=0; i<data.length; i++){
    drawRow(data[i]);
}
}
function drawRow(rowData) {
   console.log(rowData);
var row = $("<tr />")
$("#farmacyDataTable").append(row);
row.append($("<td>" + rowData.title + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));

}