How to display Json data in a html file? Just using a html, css and json page [duplicate]

Question

So I have a Json file of that looks like this

{
    "data": [{
        "name": "Garrett Winters",
        "designation": "Accountant",
        "salary": "$170,750",
        "joining_date": "2011/07/25",
    }, {
        "name": "Brielle Williamson",
        "designation": "Integration Specialist",
        "salary": "$372,000",
        "joining_date": "2012/12/02",
    }]
}

I want to display this in html with tables for each data. I know how to create tables in html. I need help with merging json with html. Thank you

Visit here stackoverflow.com/questions/19901843/…

Harshad
– Harshad

2016-02-10 05:12:23 +00:00
Commented Feb 10, 2016 at 5:12 — Harshad
– Harshad, Commented Feb 10, 2016 at 5:12

Alessio Cantarella · Accepted Answer · 2016-02-10 20:19:38Z

0

You can do it in many ways, e.g.:

var arr = {
  "data": [{
    "name": "Garrett Winters",
    "designation": "Accountant",
    "salary": "$170,750",
    "joining_date": "2011/07/25",
  }, {
    "name": "Brielle Williamson",
    "designation": "Integration Specialist",
    "salary": "$372,000",
    "joining_date": "2012/12/02",
  }]
};
$(function() {
  $(arr.data).each(function(i, v) {
    $("<tr></tr>")
      .append($("<td></td>").html(v.name + "</td>"))
      .append($("<td></td>").html(v.designation + "</td>"))
      .append($("<td></td>").html(v.salary + "</td>"))
      .append($("<td></td>").html(v.joining_date + "</td>"))
      .appendTo("#tbl");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl"></table>

answered Feb 10, 2016 at 20:19

Alessio Cantarella

5,2413 gold badges31 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

How to display Json data in a html file? Just using a html, css and json page [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related