将外部Json加载到HTML表 [英] Load External Json to HTML Table

问题描述

我有一个名为 members.json 的外部Json.我喜欢使用Jquery从Json文件中将数据加载到HTML表中，但是不知何故.

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.

请帮助.

Json

{"data":
    [
        {
            name: "Keely Luther",
            email: "[e-mail]",
            phone: "617 465 6314",
            id  : "1235-454676",
            plan : "Plan A",
            type : "New Medic",
            group : "ABC-1",
            status: "Approved"
        },
        {
            name: "Mike Jenson",
            email: "[e-mail]",
            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">

推荐答案

这是一种解决方法.

$(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
        });
    });
});

});

这篇关于将外部Json加载到HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！