displaying json output properly in a table

Question

I have an ajax function which sends a get request to an api and retrieves some JSON, which I am displaying in a table. This is what I have tried-

<script>




function getInfo() {


     $.ajax({
         type: "GET",
         url: "http://example.com/",
         contentType: "application/json; charset=utf-8",
         crossDomain: true,
         dataType: "json",
         success: function (data, status, jqXHR) {

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

            $("table.mytable").append("<tr><td>First Name</td><td>" + data[i].firstname + "</td></tr><tr><td>Last Name</td><td>" + data[i].lastname + 
            "</td></tr><tr><td>Queues</td><td>" + 
             data[i].skills +  "</td></tr>"  );
          }


             alert("success");
         },

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


</script>

However, the output on the html page looks like this-

First Name John Last Name Smith Skills Maths First Name Jane Last Name Smith Skills Maths

I would like the First Name, Last Name and Skills headers to be across the table, with the data underneath. Any idea how to do this?

Yeah, try to think logical? Do you know how to make an HTML table!? — idmean
– idmean, Commented Nov 22, 2013 at 15:04
Suggest: First build up a hardcoded HTML table with dummy data inside, if you like the result, generalize it and use JavaScript to insert dynamic data into it. I bet you have syntax error in HTML. — deb0rian
– deb0rian, Commented Nov 22, 2013 at 15:05
Each td is the start of a new column, so, your first row should be hardcoded to be the headers, then just append your data info. — tymeJV
– tymeJV, Commented Nov 22, 2013 at 15:06

idmean · Accepted Answer · 2013-11-22 15:06:46Z

Replace you for loop with this:

$("table.mytable").html("<tr><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>" + data[i].firstname + "</td><td>Last Name</td><td>" + data[i].lastname + "</td><td>" + data[i].skills +  "</td></tr>"  );
}

The whole ajax should look like this:

 $.ajax({
         type: "GET",
         url: "http://example.com/",
         contentType: "application/json; charset=utf-8",
         crossDomain: true,
         dataType: "json",
         success: function (data, status, jqXHR) {

            $("table.mytable").html("<tr><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>" + data[i].firstname + "</td><td>Last Name</td><td>" + data[i].lastname + "</td><td>" + data[i].skills +  "</td></tr>"  );
    }


             alert("success");
         },

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

Collectives™ on Stack Overflow

displaying json output properly in a table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related