使用javascript将json显示为html

Question

我有这个json数据。 我想使用javascript在html中显示它。 但遇到一些困难

{
"80": {
    "Id": "80",
    "FirstName": "Ranjan",
    "MiddleName": "Kumar",
    "LastName": "Gupta",
    "Gender": "Male",
    "Location": "kolkata",
    "Email": "ranjan.gupta.1994@gmail.com",
    "Mobile": "1234567890",
    "books": [
        {
            "BookTitle": "one",
            "BookGenre": "one",
            "BookWriter": "one",
            "BookDescription": "one"
        },
        {
            "BookTitle": "two",
            "BookGenre": "two",
            "BookWriter": "two",
            "BookDescription": "two"
        },
        {
            "BookTitle": "three",
            "BookGenre": "three",
            "BookWriter": "three",
            "BookDescription": "three"
        },
        {
            "BookTitle": "four",
            "BookGenre": "four",
            "BookWriter": "four",
            "BookDescription": "four"
        },
        {
            "BookTitle": "five",
            "BookGenre": "FIVE",
            "BookWriter": "FIVE",
            "BookDescription": "FIVE"
        }
    ]
},
"79": {
    "Id": "79",
    "FirstName": "Elon",
    "MiddleName": "",
    "LastName": "Musk",
    "Gender": "Male",
    "Location": "New York",
    "Email": "elonmusk@tesla.com",
    "Mobile": "1234567890",
    "books": [
        {
            "BookTitle": "who am i",
            "BookGenre": "inspiration",
            "BookWriter": "modi",
            "BookDescription": "this book is all about the struggle one faces all his life.no matter what he does he never get any attention"
        },
        {
            "BookTitle": "a walk to remember",
            "BookGenre": "romance",
            "BookWriter": "peter",
            "BookDescription": "a wall in the rainy season where all "
        }
    ]
},

下面是所需的输出格式。

html中的javascript，

<div class="col-md-12">
        <div class="col-md-7">
            <script type=text/javascript>


                var loading = true; 
                var ListingCountPage=1;

                function loadData(){
                    var url = "http://localhost/ReadExchange/api.php";
                    $.getJSON(url,function(data) {

                    if(data) {
                        alert("Roger that"+JSON.stringify(data));

                        var len = data.length;
                        console.log(len);

                        for(var i=0; i<len; i++) {

                            $("#postjson").append(

                                '<div>'
                                +'<p>'
                                +'FirstName:'+data[i].FirstName+'<br/>'
                                +'MiddleName:'+data[i].MiddleName+'<br/>'
                                +'LastName:'+data[i].LastName+'<br/>'
                                +'</p>'
                                +'</div>'

                            );

                        }

                    }

                });
            }


        $(function() {
            loadData();

        });
        </script>

如果您有任何想法请回覆。 提前致谢

Answer 1

您可以检查一下。 做出与您相同的输出。 请仅更新CSS。 检查此链接-Fiddle链接

检查js代码段

 var json = { "80": { "Id": "80", "FirstName": "Ranjan", "MiddleName": "Kumar", "LastName": "Gupta", "Gender": "Male", "Location": "kolkata", "Email": "ranjan.gupta.1994@gmail.com", "Mobile": "1234567890", "books": [ { "BookTitle": "one", "BookGenre": "one", "BookWriter": "one", "BookDescription": "one" }, { "BookTitle": "two", "BookGenre": "two", "BookWriter": "two", "BookDescription": "two" }, { "BookTitle": "three", "BookGenre": "three", "BookWriter": "three", "BookDescription": "three" }, { "BookTitle": "four", "BookGenre": "four", "BookWriter": "four", "BookDescription": "four" }, { "BookTitle": "five", "BookGenre": "FIVE", "BookWriter": "FIVE", "BookDescription": "FIVE" } ] }, "79": { "Id": "79", "FirstName": "Elon", "MiddleName": "", "LastName": "Musk", "Gender": "Male", "Location": "New York", "Email": "elonmusk@tesla.com", "Mobile": "1234567890", "books": [ { "BookTitle": "who am i", "BookGenre": "inspiration", "BookWriter": "modi", "BookDescription": "this book is all about the struggle one faces all his life.no matter what he does he never get any attention" }, { "BookTitle": "a walk to remember", "BookGenre": "romance", "BookWriter": "peter", "BookDescription": "a wall in the rainy season where all " } ] } } for(var key in json) { var elem = $('<div class="indvCont"></div>'); var spanName = $('<span>'+json[key].FirstName+' '+json[key].MiddleName+''+json[key].LastName+'</span>'); var table = $('<table><tr><th>No</th><th>Title</th><th>Genre</th><th>Writer</th><th>Description</th></tr></table>'); var books = json[key].books; for(var i=0;i<books.length; i++) { var newRow = $('<tr><td>'+(i+1)+'</td><td>'+books[i].BookTitle+'</td><td>'+books[i].BookGenre+'</td><td>'+books[i].BookWriter+'</td><td>'+books[i].BookDescription+'</td></tr>'); $(table).append(newRow); } $(elem).append(spanName).append(table); $('#cont').append(elem); } 

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } .indvCont { margin: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <div id="cont" class=""> </div> </body>