如何读取JSON文件？

Question

I have this Example, to create a Html table from JSON format, but a I need to read a JSON file (cars.json), how can I to do this? 我有这个示例，要从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>

In this part: 在这一部分：

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

I need to read from file. 我需要从文件中读取。

Answer 1

You can use JSON.parse and then call what you want with a dot : for example : 您可以使用JSON.parse，然后用一个点调用所需的内容：例如：

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

Here is the doc https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse 这是文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

EDIT : According to the info from the comment what you can do is this : 编辑：根据评论中的信息，您可以做的是：

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 个解决方案

解决方案1
0 2018-05-09 19:45:05

如何读取JSON文件？

问题描述

1 个解决方案

解决方案1 0 2018-05-09 19:45:05

解决方案1
0 2018-05-09 19:45:05