如何将 JSON 数据放入 html 页面答案

【问题标题】：How do i put JSON data in html page如何将 JSON 数据放入 html 页面
【发布时间】：2015-01-19 06:04:54
【问题描述】：

这是我在休息客户端获得的 json 数据。

我正在获取员工表的名字、姓氏、电子邮件 ID，我需要将此数据插入到我的 html 页面中。

怎么做，请帮忙我被打动了。

[
    {

        "firstName": "Ramu",
        "lastName": "Poola",
        "emailId": "asdfg@gmail.com"
    },
    {

        "firstName": "Dash",
        "lastName": "Board",
        "emailId": "admin@gmail.com"
    },
    {

        "firstName": "Srinivas",
        "lastName": "Grandhi",
        "emailId": "123grandhi@gmail.com"
    }
]

【问题讨论】：

你可能想Display JSON Data in HTML Table
你想要这个stackoverflow.com/questions/14100323/…
告诉我们你尝试了什么

标签： html json

【解决方案1】：

我认为在这里使用 javascript 或 jquery 更好..

检查下面的代码...

var text = '{"employees":[' +

'{"firstName":"John","lastName":"Doe" },' +

'{"firstName":"Anna","lastName":"Smith" },' +

'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);

document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;

</script>

【讨论】：

与其发布指向w3schools 的链接，不如尝试将该代码与 OP 的 JSON 一起使用并发布正确的答案？

【解决方案2】：

有很多方法可以做到这一点，大多数方法可能使用 javascript。您想在表格中显示结果吗？

如果是这样，您可以使用 jQuery 数据表： http://www.datatables.net/examples/data_sources/js_array.html

这还可以为您提供许多表格功能，例如排序和搜索，而无需您自己编写代码。

var dataSet = [ {

    "firstName": "Ramu",
    "lastName": "Poola",
    "emailId": "asdfg@gmail.com"
},
{

    "firstName": "Dash",
    "lastName": "Board",
    "emailId": "admin@gmail.com"
},
{

    "firstName": "Srinivas",
    "lastName": "Grandhi",
    "emailId": "123grandhi@gmail.com"
}
]

$('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "firstName" },
            { "title": "lastName" },
            { "title": "emailId" }              
        ]
    } );

您也可以选择像 AngularJS 这样的框架，然后使用 ng-repeat 来呈现您的表格。虽然这是一个完整的框架，但它适用于 rest apis

【讨论】：

【解决方案3】：

你只需要设置一个 id 或类名的 ant div 就可以了该div上的内容

  var logData = JSON.parse(data);
 var $grouplist = $('#surat');
    $.each(logData, function() {

                                 var dthtml="";


                                  dthtml += "<table><tr><td align='center'>"+this.firstname+"<br/></td><td><table><tr><td><img src='img/login.png'>"+this.lastname+"</td></tr><tr><td>"+this.emailId+"</td></tr></table></td></tr></table>";





                                  $(dthtml).appendTo($grouplist);

                                });


<div id='surat'></div>

【讨论】：