将外部Json加载到HTML表

时间:2018-01-17 02:18:00

标签: jquery html json

我有一个名为members.json的外部Json。我喜欢使用Jquery从Json文件加载数据到HTML表,但不知何故它不起作用。

请帮忙。

的Json

{"data":
    [
        {
            name: "Keely Luther",
            email: "kluther@abc.com",
            phone: "617 465 6314",
            id  : "1235-454676",
            plan : "Plan A",
            type : "New Medic",
            group : "ABC-1",
            status: "Approved"
        },
        {
            name: "Mike Jenson",
            email: "mike_j@yahoo.com",
            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">

2 个答案:

答案 0 :(得分:1)

这是一种做法。

>>> *x, = range(3)
>>> x
[0, 1, 2]

答案 1 :(得分:0)

需要将html标记添加到您的追加中

&#13;
&#13;
var data = [{
    name: "Keely Luther",
    email: "kluther@abc.com",
    phone: "617 465 6314",
    id: "1235-454676",
    plan: "Plan A",
    type: "New Medic",
    group: "ABC-1",
    status: "Approved"
  },
  {
    name: "Mike Jenson",
    email: "mike_j@yahoo.com",
    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>');
  })
});
&#13;
<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">
&#13;
&#13;
&#13;