如何使用 javascript 解析带有数组的外部 JSON 文件

Posted 2023-05-09

【中文标题】如何使用 javascript 解析带有数组的外部 JSON 文件

【英文标题】：How to parse a external JSON file with arrays with javascript

【发布时间】：2015-09-15 04:44:28

【问题描述】：

我目前正在努力解决使用 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 文件中。

【问题讨论】：

Parse JSON in JavaScript?的可能重复

使用 Ajax 加载文件后，只需使用 JSON.parse(theString) 获取 JS 对象。

你可以在jsoneditoronline.org检查你的JSON验证

【参考方案1】：

下面是示例 sn-p 如何读取 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);

在您的代码中，它可能看起来像这样。

更新

$.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)
);

【讨论】：

这不是使用 JSON 文件，而是使用 javascript 对象 data 来充当 JSON。我必须直接从外部 JSON 文件中提取它。

外部 JSON 并没有真正产生任何差异，我还添加了外部 JSON 的外观。 $.ajax(...

对不起，我还是不明白。代码的第二个 sn-p 会产生什么？

即AJAX调用获取外部JSON文件，其中url为外部JSON文件地址。

我现在的挣扎超出了我的预期。我试图读取外部 JSON 文件没有任何运气。我不确定我错了什么。我只是为了打印出我的 JSON 文件的内容而四处乱窜，这比其他任何事情都更令人沮丧。这是我目前拥有的，你能告诉我我做错了什么吗？ $.ajax( url: "src/passages.json", type: "POST", dataType: "JSONP", done: function(data) var obj = jQuery.parseJSON(data); console.log(data); )

【参考方案2】：

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

您可以使用jQuery.getJSON 读取文件并处理数据

【参考方案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 文本传递给函数，它就会返回映射到该特定段落编号的相应信息。我也附上了代码sn-p。

如果段落编号是唯一的并且获取数据的调用很高，那么预处理要存储为段落编号和相应数据的键值对的数据将是一个好主意。