使用 jquery 解析 JSON 数据？答案

【问题标题】：Parsing the JSON data using jquery?使用 jquery 解析 JSON 数据？
【发布时间】：2011-06-03 08:09:30
【问题描述】：

我在将 json 数据从 hello.json 解析到当前 html 文件时遇到问题。

我如何从 hello.json 获取投资者、事件和价格的数据到三个单独的数组。

http://compliantbox.com/mobile/optionsedge/hi.html

请帮帮我！！！

这是我的 html 代码：

    <html>
    <head>
      <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    </head>
    <body>
    <script>

    $.getJSON("http://compliantbox.com/mobile/optionsedge/hello.json?jsoncallback=?",
      {},
      function(data) { alert(data);  $.each(data.items, function(i,item){ alert(); });
      });
    </script>
    </body>
    </html>

这是我的 json 代码：

{ "data": 

{ 

"current_condition":[{

        "investors": [{"active"},{"agressive"},{"conservative"},{"day trader"},{"very active"}], 

        "events": [{"3 months"},{"weekly"},{"monthly"},{"leaps"},{"heaps"}], 

        "price": [{"4"},{"3"},{"9"},{"5"},{"2"}]

    } ] }}

【问题讨论】：

应该是。当我访问您的页面并且您没有提供测试用例时，什么都没有发生，所以我无法进一步评论。
Uncaught SyntaxError: Unexpected token :
如果您正在使用 Ajax 并且它不起作用，您应该真正查看控制台。
@Tomalak Geret'kal 当您在 chrome 中打开文件时，您可以看到 hello.json 正在被调用，但其中的数据没有解析............

标签： jquery html json parsing

【解决方案1】：

更新 3：我实际上只是查看了您的链接页面（总是将相关代码复制到问题本身），这是您的问题：

$.each(data.items, function(i,item){
  $("<html/>").attr("src", item.event);
  if ( i == 3 ) return true;
});

在反序列化您指向的（现在有效的）JSON 的结果对象中没有data.items。根本没有items。您的 JSON 描述了一个具有一个属性 data 的对象，该属性又具有一个属性 current_conditions，它是一个具有一个条目的数组，一个具有属性 investors、events 和 price 的对象。请参阅我在 Update 2 中的代码以了解如何与之交互。

更新 2：如果您更改 JSON 以使其有效，jQuery 将工作。我的意思是，成千上万的网站每天都在使用它……Live example 对您的数据进行了处理以使其有效。

更新：现在您已经发布了 JSON，我们可以看到它是无效的。查看JSON 站点和JSONlint 工具。您的investors、events 和price 数组都包含{"active"} 形式的条目，这是一个无效的对象条目。

原答案：

如果您使用 jQuery 的 ajax 函数（或 getJSON 或其其他包装器之一），则应该在您看到它时对其进行解析。如果您必须自己解析 JSON 字符串，请使用 parseJSON。详情：

`ajax` 及其包装器

扩展ajax 事物：如果您要返回一个字符串并期望一个对象（例如，解析 JSON 的结果），请确保服务器返回正确的内容类型（“application/json ”）。如果您无法控制服务器并且它发回了错误的内容类型，您可以通过为ajax 提供dataType 选项来覆盖服务器。

如果它不起作用，您可能需要检查一下 -- JSON 真的是 valid JSON 吗？因为那里有很多不完全的 JSON。例如，这是有效的 JSON：

{
    "foo": 1,
    "bar": "x"
}

这不是：

{
    foo: 1,
    bar: 'x'
}

严格的解析器可能会拒绝后者，因为它是无效的（以几种不同的方式）。

示例 - 正常、服务器配置正确的版本：

$.ajax({
   url: "yoururl",
   success: function(data) {
       // Here, `data` is already an object if the response was
       // JSON and the server gave the correct content-type
   }
});

示例 - 强制数据类型：

$.ajax({
   url: "yoururl",
   dataType: "json",           // <== The new bit
   success: function(data) {
       // Here, `data` is already an object if the response was
       // parseable JSON
   }
});

或

$.getJSON("yoururl", function(data) {
   // Here, `data` is already an object if the response was
   // parseable JSON
});

解析你自己的字符串：

var str = '{"foo": 1, "bar": "x"}'; // A JSON string
var obj = jQuery.parseJSON(str);    // The resulting object

【讨论】：

实际上是无效的 JSON。它包含如下内容：{“active”}，它声明了一个没有值的标识符。可能是 JSON 编码器的问题。
@digitalFresh：他之前没有发布过。是的，这很无效。 :-)
@digitalFresh 不走运，兄弟，我将 json 更改为有效但仍然无法解析数据
@Prateek Raj：您的问题仍然显示 JSON 无效。我在上面的答案中添加了第二个更新，表明是的，如果数据有效，它确实工作。希望这会有所帮助。
@Prateek Raj：我刚刚添加了更新 3，但看起来你已经接受了（我猜你看了更新 2 并想通了）。

【解决方案2】：

您的 JSON 无效。

http://compliantbox.com/mobile/optionsedge/hello.json?jsoncallback=?

http://www.jsonlint.com/

这就是解析不起作用的原因。

正如@Skilldrick 在问题 cmets 中指出的那样，当您执行 AJAX 并且它不起作用时，您应该检查控制台；这样做会暴露语法错误异常。

【讨论】：

更具体地说，{"foo": "bar"} 是一个有效对象，{"foo"} 不是（缺少属性值）。
确实如此。他的意思可能是["foo"]。但我们不想放弃太多，是吗？ :P 有很多参考资料供他阅读 (json.org)。
不走运，兄弟，我将 json 更改为有效但仍然无法解析数据
@Prateek 那么你有一个新问题。请从您的控制台获取一些错误消息并提出相应的问题。

【解决方案3】：

根据您喜欢的页面和它随后调用的 JSON 文件，我会说这将为您提供所需的内容：

function(data) {
    var lists = data['data']['current_condition'][0];

    var investors = lists['investors'],
        events = lists['events'],
        price = lists['price'];
}

【讨论】：

ajax 及其包装器

解析你自己的字符串：

`ajax` 及其包装器