如何使用javascript解析帶有數組的外部JSON文件

Question

我目前正在努力解決使用javascript讀取JSON文件的問題。
我不完全確定這是否是帶有數組的JSON文件的正確格式，但這是我的JSON文件。

  [
      {
       "passageNumber":"2.3.1",
       "title":"Inside and out: A bronze Athena and a Temple of Octavia",
        "preReading":"This paragraph appears to refer to what the excavators named Temple E...",
        "reading":"<span>Lorem</span> ipsum <span>dolor</span> sit amet, consectetur",
        "media":"<img src='img/TempleE-capital.jpg'>",
        "lon":"41.925",
        "lat":"-91.426"
       },
       {
        "passageNumber":"2.3.2",
        "title":"The Road to Lechaeum",
        "preReading":"<a href='http://google.com'>yipppie",
        "postReading":"",
        "reading":"blahhhhhhhhhhhhhhhhhh.",
        "media":"<img src='img/templE-brick.jpg'>",
        "lon":"41.625",
        "lat":"-91.672"
       }
   ]

我最終希望能夠讀取JSON文件（最有可能使用JQuery），然后選擇給定段落編號的所有信息。
任何幫助都會很棒。
謝謝！
編輯我從外部JSON文件中提取這個。 它需要加載JSON文件。

Answer 1

下面是如何閱讀JSON的示例代碼段。

 var JSONDataFromExternalFile = '[{"passageNumber":"2.3.1","title":"Inside and out: A bronze Athena and a Temple of Octavia","preReading":"This paragraph appears to refer to what the excavators named Temple E...","reading":"<span>Lorem</span> ipsum <span>dolor</span> sit amet, consectetur","media":"<img src=\\'img/TempleE-capital.jpg\\'>","lon":"41.925","lat":"-91.426"},{"passageNumber":"2.3.2","title":"The Road to Lechaeum","preReading":"<a href=\\'http://google.com\\'>yipppie","postReading":"","reading":"blahhhhhhhhhhhhhhhhhh.","media":"<img src=\\'img/templE-brick.jpg\\'>","lon":"41.625","lat":"-91.672"}]' var data = JSON.parse(JSONDataFromExternalFile); function getDetails(passageNumber){ for(i in data){ if (data[i].passageNumber == passageNumber) return data[i]; } return false; } var details = getDetails("2.3.2"); alert("title > "+details.title); alert("preReading > "+details.preReading); var details = getDetails("2.3.1"); alert("title > "+details.title); alert("preReading > "+details.preReading); 

在你的代碼中它可能看起來像這樣。

UPDATE

$.ajax({
     url: "http://www.json-generator.com/api/json/get/cgRivNixNK",
     type: "POST", //type:"GET"
     dataType: "JSON",
     success: function(data){
           console.log(data)
     }
})

要么

$.ajax({
     url: "http://www.json-generator.com/api/json/get/cgRivNixNK",
     type: "POST", //type:"GET"
     dataType: "JSON"
})
.done(function(data){
           console.log(data)
});

Answer 2

是的，該示例是有效的JSON。

您可以使用jQuery.getJSON讀取文件並使用數據

Answer 3

 function getDetails(passageNumber, strJSON) { var obj = jQuery.parseJSON(strJSON); $.each(obj, function (key, value) { if (passageNumber == value.passageNumber) { result = value; return false; } }); return result; } var strJSON = '[\\ {"passageNumber":"2.3.1",\\ "title":"Inside and out: A bronze Athena and a Temple of Octavia",\\ "preReading":"This paragraph appears to refer to what the excavators named Temple E...",\\ "reading":"<span>Lorem</span> ipsum <span>dolor</span> sit amet, consectetur",\\ "media":"<img src=\\'img / TempleE - capital.jpg \\'>",\\ "lon":"41.925",\\ "lat":"-91.426"},\\ {"passageNumber":"2.3.2",\\ "title":"The Road to Lechaeum",\\ "preReading":"<a href=\\'http: //google.com\\'>yipppie",\\ "postReading": "",\\ "reading": "blahhhhhhhhhhhhhhhhhh.",\\ "media": "<img src=\\'img/templE-brick.jpg\\'>",\\ "lon": "41.625",\\ "lat": "-91.672"\\ }\\ ]'; var result = getDetails("2.3.1", strJSON); if(result != null) { alert(result.passageNumber); alert(result.title); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

它是一種非常有效的格式，表示對象數組。

要按段號查找信息，以下功能將幫助您：

function getDetails(passageNumber, strJSON) {
    var obj = jQuery.parseJSON(strJSON);


    $.each(obj, function (key, value) {
        if (passageNumber == value.passageNumber) {

            result = value;
            return false;
        }
    });

    return result;
}

只需將您的段落編號和json文本傳遞給該函數，它將返回映射到該特定段落編號的相應信息。 我也附上了一個代碼片段。

最好預處理要存儲的數據作為通道號的關鍵值對，並且提供的相應數據通道號是唯一的，並且對獲取數據的調用很高。