CODEWITHSUNDEEP
jqueryhtmljson
bookthief
bookthief

Reputation: 2451

Formatting JSON object for display in table

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>");
}
}

         },

Upvotes: 1

Views: 773

Answers (1)

Vivin Paliath
Vivin Paliath

Reputation: 95498

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));
}

Upvotes: 1

Related Questions