Load External Json to HTML Table

Question

I have an external Json named members.json. I like to load the data to HTML table from the Json file by using Jquery, but somehow it doesn't work.

Please help.

Json

{"data":
    [
        {
            name: "Keely Luther",
            email: "[email protected]",
            phone: "617 465 6314",
            id  : "1235-454676",
            plan : "Plan A",
            type : "New Medic",
            group : "ABC-1",
            status: "Approved"
        },
        {
            name: "Mike Jenson",
            email: "[email protected]",
            phone: "943 355 0193",
            id  : "1235-478948",
            plan : "Plan A",
            type : "New Medic",
            group : "ABC-1",
            status: "Cancelled"
        }
    ]
}

.JS

$(document).ready( function() {  
$.getJSON('members.json',
  function(data) {        
    $("#Table").html(" FirstLastMiddle");
    for (var i = 0; i < data.length; i++)
        {
            var tr="";
              var td1=""+data[i]["name"]+"";
              var td2=""+data[i]["email"]+"";
              var td3=""+data[i]["phone"]+"";
              var td4=""+data[i]["id"]+"";

            $("#Table").append(tr+td1+td2+td3+td4);

        }
  });
});

HTML

<table id="Table" width="90%" border="1" bordercolor="#ccc">

don't you need the html tags? .append('<tr><td>'+td1+'</td><td>'+td2+</td></td> you get the idea — Bryan Dellinger
– Bryan Dellinger, Commented Jan 17, 2018 at 2:28
var td = document.createElement("td") then td.innerHTML = data[i]["name"] then tr.appendChild(td) — Ronnie Smith
– Ronnie Smith, Commented Jan 17, 2018 at 2:40

user9227272 · Accepted Answer · 2018-01-17 02:46:34Z

1

Here's one way of doing it.

$(function () {

$.getJSON('members.json', function(data) {        
    var table = $("#Table").empty();
    $.each(data, function (i, member) {
        $("<tr>", {
            html: [
                $("<td>", { html: member.name }),
                $("<td>", { html: member.email }),
                $("<td>", { html: member.phone }),
                $("<td>", { html: member.id })
            ],
            appendTo: table
        });
    });
});

});

answered Jan 17, 2018 at 2:46

user9227272

111 bronze badge

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

1 Comment

abcid d Over a year ago

Hi user9227272, I try your code, the table shows up, but no data! Please take a look at my Json. On the top {"data":[{ is that correct way? Is there any different between name: "Keely Luther", and "name": "Keely Luther",?

Bryan Dellinger · Accepted Answer · 2018-01-17 02:43:15Z

0

need to add the html tags to your append

var data = [{
    name: "Keely Luther",
    email: "[email protected]",
    phone: "617 465 6314",
    id: "1235-454676",
    plan: "Plan A",
    type: "New Medic",
    group: "ABC-1",
    status: "Approved"
  },
  {
    name: "Mike Jenson",
    email: "[email protected]",
    phone: "943 355 0193",
    id: "1235-478948",
    plan: "Plan A",
    type: "New Medic",
    group: "ABC-1",
    status: "Cancelled"
  }
];


$(document).ready(function() {
  $.each(data, function(i, obj) {
    $("#Table").append(
      '<tr><td>' + obj.name + '</td><td>' + obj.email + '</td><td>' + obj.phone + '</td><td>' + obj.id + '</td></tr>');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Table" width="90%" border="1" bordercolor="#ccc">

answered Jan 17, 2018 at 2:43

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

1 Comment

abcid d Over a year ago

Hi Bryan, I try your code, but somehow it doesn't show the table! This Json file is an external file, do you have any idea?

Collectives™ on Stack Overflow

Load External Json to HTML Table

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related