javascriptを使用してjsonをhtmlに表示する

Question

私はこのjsonデータを持っています。私はそれをHTMLでjavascriptを使って表示したいのです。しかし、いくつかの困難を感じる

{ 
"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で

ジャバスクリプト、

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

jsのコードを確認してくださいなぜあなたは `PHP`にタグを付けるん

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) { 
 
\t 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++) { 
 
    \t 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>