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

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

Answer 1

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>