display json into html using javascript

Question

i have this json data. which i want to display it in html using javascript. but getting some difficulties

{
"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 "
        }
    ]
},

below is desired output format.

javascript in html,

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

do reply if you have any idea. thanks in advance

Answer 1

You can check this. To make same output like yours. please update the css only. Check this link - Fiddle Link

Check the js code segement`

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>