Question

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

我正在获取employee表的firstName，lastName，emailId，我需要将这些数据插入到我的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"
    }
]

Answer 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>

Answer 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

Answer 3

你需要在将该内容放在该div之后设置一个id或类名的ant 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>

如何将JSON数据放在html页面中

3 个答案: