[英]How to read a JSON file?
我有这个示例,要从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................
我需要从文件中读取。
您可以使用JSON.parse,然后用一个点调用所需的内容:例如:
var jsonParsed = JSON.parse(json_obj);
console.log(jsonParsed.name); // output : John
这是文档https://developer.mozilla.org/zh-CN/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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.