Как прочитать файл JSON? - PullRequest
Новая
       22

Как прочитать файл JSON?

0 голосов
/ 09 мая 2018

У меня есть этот пример, чтобы создать HTML-таблицу из формата JSON, но мне нужно прочитать файл 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................

Мне нужно прочитать из файла.

1 Ответ

0 голосов
/ 09 мая 2018

Вы можете использовать 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);
});
...