Convert AJAX Response of Objects Array to a JSON object

Question

I have a sample endpoint here which has a JSON data, but for any reason I do not understand why it does return [object Object].

Mock API

I have a previous code which was a bit confusing, but luckily I saw another answer that was clearer.

function generateTable(data, selId){

    var cnt = "<table border=1>";

    cnt += "<tr>";
    $.each(JSON.parse(data), function(key,value){
       cnt += "<td><strong>" + key + "</strong></td>";
    });
   cnt += "<tr>";

   /* cnt += "<tr>";
   $.each(obj, function(key,value){
       cnt += "<td>" + value + "</td>";
   });
   cnt += "<tr>"; */ This part was commented because the conversion above does not work.
   cnt += "</table>";

   $(selId).html(cnt);

}

function createTableData(APIurl, selId){
    $.getJSON("http://jsonplaceholder.typicode.com/posts", function(data){
          generateTable(data, selId);
    });
}

When I try to alert the data returned, it return [object Object], [object Object], ... and so on. How do I convert the JSON data from the API to an array where I can access inside my generateTable function? Thanks for the help.

Check the console.log() instead of alert. And it looks like you've got an object back already, so you don't need to JSON.parse() it. — zerkms
– zerkms, Commented Jan 11, 2016 at 2:14

Gabriele Petrioli · Accepted Answer · 2016-01-11 02:15:25Z

1

You need to iterate over the array

var cnt = "<table border=1>";
for (var i=0, len=data.length; i<len; i++){
    var row = data[i];
    cnt += "<tr>";
    $.each(row, function(key,value){
       cnt += "<td><strong>" + key + "</strong></td>";
    });
   cnt += "</tr>";
}
cnt += "</table>";

answered Jan 11, 2016 at 2:15

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cyval Over a year ago

Thanks. I try to debug that one. It works for the console. However, it does not reflect in the HTML.

Gabriele Petrioli Over a year ago

You still need to use the $(selId).html(cnt); i just included the part that needed edits.

Cyval Over a year ago

That one works like a charm. Now, I am trying to loop once over the keys of the object. However it returns 0,1,2,3... How do I loop over "name, "age", etc."? I tried using Object.keys but it didn't work. Thanks. @GabyakaGPetrioli

Collectives™ on Stack Overflow

Convert AJAX Response of Objects Array to a JSON object

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related