使用 Javascript 从 JSON 中获取数据答案

【问题标题】：Grabbing data from JSON using Javascript使用 Javascript 从 JSON 中获取数据
【发布时间】：2010-10-24 12:55:02
【问题描述】：

好的，我有一个如下所示的 json 输出：

{"Result" : [
              {
                "Id" : "5214",
                "ParentReasonId" : "0",
                "Description" : "Billing & Payment",
                "SysName" : "Billing & Payment",
                "SysCategory" : "Billing & Payment",
                "ClientId" : "924",
                "DispositionCount" : "6",
                "IsActive" : true,
                "ChildReasonCount" : "8",
                "Attributes" : [],
                "SortOrder" : "0",
                "CreatedBy" : null
              }
            ]
 }

我想从中提取 id 和 description 的数据。

    jQuery("#chained_child").cascade("#chained", {
    ajax: { url: 'Customhandler.ashx?List=MyList' },
        template: commonTemplate,
        match: commonMatch
    });

function commonTemplate(item) {
    return "<option Value='" + item.Result.Id + "'>" 
           + item.Result.Description + "</option>";
};

但是对于我的生活，我无法让它返回我正在寻找的价值。我知道这很无聊，但我正在碰壁。有人可以帮忙吗？

【问题讨论】：

我不认为是语法错误把你搞砸了？
当我把 alert(item.Result.Id) 我回来未定义。所以我不太确定。
该 JSON 是否从某处作为字符串返回？你确定它已经被评估成一个对象吗？通过 alert(typeof item) 查找；

标签： javascript jquery json

【解决方案1】：

如果您检查 JSON 字符串，您的 Result 对象实际上是一个大小为 1 的数组，其中包含一个对象，而不仅仅是一个对象。您应该删除多余的括号或使用以下方法引用您的变量：

item.Result[0].Id

为了使用 item.Result.Id 引用您的变量，您需要以下 JSON 字符串：

{
    "Result" :
    {
        "Id" : "5214",
        "ParentReasonId" : "0",
        "Description" : "Billing & Payment",
        "SysName" : "Billing & Payment",
        "SysCategory" : "Billing & Payment",
        "ClientId" : "924",
        "DispositionCount" : "6",
        "IsActive" : true,
        "ChildReasonCount" : "8",
        "Attributes" : [],
        "SortOrder" : "0",
        "CreatedBy" : null
    }
}

【讨论】：

我试过这个，但一无所获。我收到错误项目。结果未定义？我知道数据是通过网络传输的，但不知道该怎么做。

【解决方案2】：

对我的 JSON 时髦有极大帮助的一件事是在 Firebug 中设置断点，让您可以单步执行生成的对象，并查看其结构。

【讨论】：

这绝对有帮助。似乎项目中唯一的东西是非常奇怪的 url。

【解决方案3】：

您可能想看看这个来自 IBM 的 JSON 教程：

Mastering Ajax, Part 10: Using JSON for data transfer

【讨论】：

【解决方案4】：

item.Result[0].Id 像 Sebastian 提到的那样工作 - 但是它只有在“item”实际分配了一个值时才有效。我的猜测是不是。

在您的 commonTemplate 函数中尝试执行 console.log(item) 并查看结果。

【讨论】：

【解决方案5】：

据我在plugin page 上看到的，发送到模板回调的参数是 JSON 响应中的 item，它是一个数组。您的 JSON 响应是一个对象。我猜你没有发送正确的 JSON 响应。但是请谨慎对待，因为我从未使用过此插件。

无论如何，如果我是对的，你的反应应该是：

[
    {
        "Result" :
        {
            "Id" : "5214",
            "ParentReasonId" : "0",
            "Description" : "Billing & Payment",
            "SysName" : "Billing & Payment",
            "SysCategory" : "Billing & Payment",
            "ClientId" : "924",
            "DispositionCount" : "6",
            "IsActive" : true,
            "ChildReasonCount" : "8",
            "Attributes" : [],
            "SortOrder" : "0",
            "CreatedBy" : null
        }
    }
]

【讨论】：

【解决方案6】：

Ionut G. Stan 的回答是正确的。您的 json 输出不是 cascade 插件的正确格式。

如果您不想更改 json，可以使用 ajax 设置中的 dataFilter 选项来扩充数据。

我在这里设置了一个工作演示：http://jsbin.com/ebohe（可通过http://jsbin.com/ebohe/edit 编辑）

这是相关的javascript：

$(function(){
  $('#chained_child').cascade(
    '#chained',
    {
      ajax: {
        url: 'Customhandler.ashx?List=MyList',
        dataFilter: extractResult
      },
      template: customTemplate,
      match: customMatch
    }
  );

  function extractResult(data) {
    return eval('(' + data + ')').Result;
  }

  function customTemplate(item) {
    return $('<option />')
      .val(item.Id)
      .text(item.Description);
  }

  function customMatch(selectedValue) {
    return this.ParentReasonId == selectedValue;
  }
});

【讨论】：