Not able to print JSON Response in HTML table properly using jQuery

Question

I have written the following code for the printing the JSON in a HTML page.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $.getJSON("http://localhost:8080/json",function(result){
    $.each(result, function(i, field){
      $("tr").append(field + " ");
    });
  });
});
</script>
</head>
<body>
  <table id="table">
    <tr>
      <th>market</th>
      <th>buy</th>
      <th>sell</th>
      <th>currency</th>
      <th>volume</th>
    </tr>
  </table>
  <div></div>
</body>
</html>

I am able to print the JSON Response values, but was not able to properly print them in a table.

JSON Response format:

{
  "market": 1309480,
  "buy": 1309480,
  "sell": 1280017,
  "currency": "INR",
  "volume": 2253.4518854
}

Currently how the Table is looking:

Don't you need td inside the tr? Also you are appending them to the same place your headers are. You should make use of thead and tbody. — N. Ivanov
– N. Ivanov, Commented Dec 12, 2017 at 10:45

bipen · Accepted Answer · 2017-12-12 11:07:58Z

2

You need <td> tag to display the content in the table. <th> is a table header tag.

Try below:

$.getJSON("http://localhost:8080/json",function(result){
        var tr = '<tr>';  //create tr tag 
        $.each(result, function(i, field){
            tr += '<td>' + field +'</td>';  //loop through the result and create <td>
        });
        tr += '</tr>';  //close tr tag
        $('#table').append(tr);  // append it to table
}

Also, I am pretty sure you might need this fro multiple columns (i.e if you result is multiple). You need to use 2 loops for that. Try it out. Created fiddle for reference: https://jsfiddle.net/bipen/3prfj474/ ;)

edited Dec 12, 2017 at 11:07

answered Dec 12, 2017 at 10:51

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

5 Comments

Alapan Das Over a year ago

can you help me with the HTML code as well. As I am not able to see any output, using the changes suggested by you.

bipen Over a year ago

@AlapanDas Wait, there was a syntax error. Updated the answer please check.

bipen Over a year ago

@AlapanDas Also, I think you want to display it in multiple columns if you result is an array. here is an example fiddle. jsfiddle.net/bipen/3prfj474

Alapan Das Over a year ago

I am not able to get the output with the code you suggested. I have written the code here. Can you look into it once and let me know where am I making the mistake. jsfiddle.net/xt3pt6h2

bipen Over a year ago

dude!!! data should be result. Here update the fiddle. jsfiddle.net/bipen/xt3pt6h2/2 . Also, this will work if your result is array else the one above will work.

Shiladitya · Accepted Answer · 2017-12-12 13:26:54Z

1

Here you go with a solution

var result = {
  "market": 1309480,
  "buy": 1309480,
  "sell": 1280017,
  "currency": "INR",
  "volume": 2253.4518854
};

//$.getJSON("http://localhost:8080/json",function(result){
  $('#table').append('<tr/>');
  $.each(result, function(i, field){
    $('#table').find('tr:last').append('<td>' + field + '</td>');    
  });
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <th>market</th>
    <th>buy</th>
    <th>sell</th>
    <th>currency</th>
    <th>volume</th>
  </tr>
</table>
<div></div>

I just commented out the AJAX call, please uncomment & remove the result variable.

First append a tr to the table & then using jQuery last selector get the last appended tr & append the table to td data.

Hope this will help you.

answered Dec 12, 2017 at 13:26

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

2 Comments

Alapan Das Over a year ago

@shailaditya Thanks it worked for me. Just a quick ques, I want to insert a one a static value like the first element of the row, how can I do that ?

Shiladitya Over a year ago

@AlapanDas Similarly you can use :first

Vladimir · Accepted Answer · 2017-12-12 10:53:10Z

0

You may insert tag <td> in

$("tr").append(field + " ");

like this:

$("tr").append("<td>" + field + "</td>");

answered Dec 12, 2017 at 10:53

Vladimir

1,40110 silver badges12 bronze badges

Collectives™ on Stack Overflow

Not able to print JSON Response in HTML table properly using jQuery

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related