Formatting JSON object for display in table

Question

I have an ajax query which returns some JSON and puts it into a table. The JSON is in the following format:

[
  {
    "firstname": "Donald",
    "lastname": "Duck",
    "email": "[email protected]",
    "skills": [
      {
        "id": 1,
        "name": "maths"
      },
      {
        "id": 2,
        "name": "chemistry"
      }
    ]
  }

The 'skills' are coming back as an object because they have multiple values, but this means that they will not display in my table. I have tried to convert them to string using

JSON.Stringify(data[i].skills, null, " ") but it makes the whole table disappear. Any ideas on how I can get the data to show in the table?

Here is my function-

function getAgents() {


     $.ajax({
         type: "GET",
         url: "http://127.0.0.1:3010/admin-api/v1/123/agents/",
         contentType: "application/json; charset=utf-8",
         crossDomain: true,
         dataType: "json",
         success: function (data, status, jqXHR) {

             // fill a table with the JSON
           $("table.mytable").html("<tr><th></th><th>First Name</th><th>Last Name</th>  <th>Queues</th></tr>"  );

for (var i=0;i<data.length;i++) {
   $("table.mytable").append("<tr><td>" + "<input type = 'checkbox'" + "</td><td>" + data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + data[i].skills +  "</td></tr>"  );
}

         },

         error: function (jqXHR, status) {
             // error handler
             console.log(jqXHR);
             alert('fail' + status.code);
         }
      });
   }

Have also tried-

$("table.mytable").html("<tr><th></th><th>First Name</th><th>Last Name</th><th>Queues</th></tr>"  );

              for (var i = 0; i < data.length; i++) {
                var skills = data[i].skills;

                  for(var j = 0; j < skills.length; j++) {
                  var skill = skills[j];



    $("table.mytable").append("<tr><td>" + "<input type = 'checkbox'" + "</td><td>" + data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + data[i].skill + "</td></tr>");
}
}

         },

i.e because you have an error. Stringify should be stringify jsfiddle.net/95ypA — PSL
– PSL, Commented Nov 25, 2013 at 15:49
Thanks, but it's not working for me either way? Using the lower case stringify doesnt make the table disappear, but it just says undefined for the array values! — bookthief
– bookthief, Commented Nov 25, 2013 at 15:54
What do you mean by not contructing my html properly? Very much a newbie. — bookthief
– bookthief, Commented Nov 25, 2013 at 15:58
sorry, your html is fine. did you check the fiddle in my earlier comment. see if you see any errors in your console. It works for me in the fiddle.. — PSL
– PSL, Commented Nov 25, 2013 at 16:00

Vivin Paliath · Accepted Answer · 2013-11-25 16:32:27Z

1

You are using JSON.Stringify; it should be JSON.stringify. Did you check your console for errors? Simply spitting the JSON out isn't too user-friendly, though. Is that what you want?

You're going to have to iterate over each individual skill and then insert that into the table in a format that you see fit (perhaps you can use an un-ordered list):

var $table = jQuery("table");
$table.append(jQuery("tr")
    .append(
        jQuery("th").text("First Name"))
    .append(
        jQuery("th").text("LastName")) ... //and so on 
)

for(var i = 0; i < data.length; i++) {
    var $tr = jQuery("tr");
    $tr.append(
        jQuery("td").text(data[i].firstname})
    ).append(
        jQuery("td").text(data[i].lastname)
    )...

    var skills = data[i].skills;
    var $ul = jQuery("ul");

    for(var j = 0; j < skills.length; j++) {
        var skill = skills[j];

        $ul.append(jQuery("li").text(skill.name));
    }

    $tr.append(jQuery("td").append($ul));
}

edited Nov 25, 2013 at 16:32

answered Nov 25, 2013 at 15:50

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

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

5 Comments

bookthief Over a year ago

That looks really good, but where do I put this iteration? Do I nest it within my original for statement?

Vivin Paliath Over a year ago

Yes, you would have to nest it.

bookthief Over a year ago

That makes all my data disappear, see edit- I am probably doing it wrong, very new to this

Vivin Paliath Over a year ago

@bookthief You cannot put the code that generates each row (corresponding to each value of i) inside the loop that iterates over each skill. You have to do it separately. First generate the code for the table row, then generate the rest of the data for the skill.

bookthief Over a year ago

I dont really understand what you mean by that?

Collectives™ on Stack Overflow

Formatting JSON object for display in table

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related