Shreya Rawal Shreya Rawal - 21 days ago 6
jQuery Question

How to display json data dynamically in table format using jquery?

I have json data like this

{
Qty:[61.0,0.0,8.0],
Name:["2009 A","2009 B","2009 C "]
}


and I have to display it in tabular format in html such that all the three elements should be displayed in different rows of the table.It should also be able to contain single name and qty respectively and multiple too (if needed ). Any help would be appreciated in this regard.

Answer

You can see below code how it iterate through $.each loop

$(document).ready(function (e) {
        var t = { Qty: [61.0, 0.0, 8.0], Name: ["2009 A", "2009 B", "2009 C "] }
        $.each(t.Qty, function (i, ele) {
            $("#content").append("<tr><td>" + parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>");
        })
    })
  
  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Qty</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody id="content">
    </tbody>
</table>