Question

我有这个例子，用JSON格式创建一个Html表，但是我需要读一个JSON文件（cars.json），我该怎么做呢？

  <!DOCTYPE html>
<html>
<head>
    <title>Dynamic Table</title>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
button{
    border-radius: 10px;
    height: 45px;
    width: 150px;
    text-align: center;
    background-color: #5499C7;
    font-size: 15px;
    color: #ffffff;
    }
  input{
    height: 35px;
    font-size: 15px;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    text-align: center;
    padding: 15px;
    font-size: 20px;
}
th {
    background-color: #5499C7;
    color: white;
    font-style: bold;
    font-size: 35px;
}
</style>
    <script >
//JSON Object................
      var json_obj  = {
          "name":"John",
          "age":30,
          "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda","550" ] }
    ]
 }
//JSON Object End................
//Create table and fetch data from JSON Object.
        $(document).ready(function(){
            $("button").click(function(){
              var number_of_rows = json_obj.cars.length;
              var k = 0;
              var table_body = '<table border="1" id="example"><thead><tr><th>Cars</th><th>Models1</th><th>Models2</th><th>Models3</th></tr></thead><tbody>';
              for(j in json_obj.cars){
            //  for(i =0;i<json_obj.cars.length;i++){
                    table_body+='<tr>';
                    table_body +='<td>';
                    table_body +=json_obj.cars[k]["name"];
                    table_body +='</td>';
                    for(x =0;x<3;x++){
						table_body +='<td>';
						table_body +=json_obj.cars[k].models[x];
						table_body +='</td>';
                    }
                    table_body+='</tr>';
             // }
              k++;
            }
                table_body+='</tbody></table>';
               $('#tableDiv').html(table_body);
              //display data..........
            });
// for search function.................................. only............................
        $("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("table tr").filter(function(index) {
          if(index>0){
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    }
    });
});
//=================End=========================End===============================
        });
</script>
</head>
<body>
<div style="margin-top: 50px; margin-left: 250px; margin-right: 250px;">
    <button>Create Table</button>
<input type="text" id="search" placeholder="Search data here....."></input>
    <div id="tableDiv" style="margin-top: 40px">
        Table will gentare here.
    </div>
</div>
<p id="p1"></p>
</body>
</html>

在这部分：

//JSON Object................
var json_obj  = {
    "name":"John",
    "age":30,
    "cars": [
        { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "models":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "models":[ "500", "Panda","550" ] }
    ]
}
//JSON Object End................

我需要从文件中读取。

Answer 1

你可以使用JSON.parse然后用点调用你想要的东西：例如：

var jsonParsed = JSON.parse(json_obj);
console.log(jsonParsed.name); // output : John

以下是文档https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

编辑：根据评论中的信息，你可以做的是：

function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'file.json', true);
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);

        }
    }
    xobj.send(null);
}

loadJSON(function(response) {
     var json_obj = JSON.parse(response);
});

如何读取JSON文件？

1 个答案: