Question

我有一个简单的AJAX代码来显示一个JSON文件，该文件使用该html存储在本地，并且它一直在说未定义。我试图通过java脚本来做，因为我还没有学过任何JQuery，我希望我的代码在语法上是正确的。先谢谢！

<script>

        function loadJSON()
{
           var data_file = "language.json";
           var http_request = new XMLHttpRequest();
           try{
              // Opera 8.0+, Firefox, Chrome, Safari
              http_request = new XMLHttpRequest();
           }catch (e){
              // Internet Explorer Browsers
              try{
                 http_request = new ActiveXObject("Msxml2.XMLHTTP");
              }catch (e) {
                 try{
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                 }catch (e){
                    // Something went wrong
                    alert("Browser does not support this.");
                    return false;
                 }
              }
           }
           http_request.onreadystatechange  = function(){
              if (http_request.readyState == 4  )
              {
                // Javascript function JSON.parse to parse JSON data
                var jsonObj = JSON.parse(http_request.responseText);

                // jsonObj variable now contains the data structure and can
                // be accessed as jsonObj.name and jsonObj.country.
                document.getElementById("language").innerHTML =  jsonObj.language;
                document.getElementById("edition").innerHTML = jsonObj.edition;
              }
           }
           http_request.open("GET", data_file, true);
           http_request.send();
        }

        </script>
    </head>
    <body>
        <table border="1">
        <tr><th> language </th> <th> edition </th></tr>
        <tr><td> <div id="language"></div> </td><td> <div id="edition"></div> </td>     </tr>
        </table>
        <button type="button" onclick="loadJSON()"> Load JSON </button>
    </body>
</html>

这是JSON我试图通过AJAX在表中显示。

{
"books":    [
    { "language": "Java" , "edition" :"second"},
    { "language": "C++" , "edition" :"fifth"},
    { "language": "C" , "edition" :"third"}
    ]
}

Answer 1

你需要对jsonObj.books数组进行更新，如：

var table = document.getElementById("books_table"); // with: <table id='books_table'...
for(var i in jsonObj.books) {
 var book = jsonObj.books[i];
 table.innerHtml += '<tr><td> <div>'+book.language'+</div> </td><td> <div> '+book.edition'+</div> </td></tr>';
}

jsonObj.books是一个数组

for(var i in jsonObj.books)

迭代数组的指标

 var book = jsonObj.books[i];

提取第i个实际的书＆＃39;数组中的对象

如何在JSON文件中显示数组？

1 个答案: