使用 jQuery 处理 JSON 对象答案

【问题标题】：Using jQuery to process a JSON object使用 jQuery 处理 JSON 对象
【发布时间】：2010-10-18 13:19:46
【问题描述】：

我的 JSON 对象是这样构造的：

var Source =
{
    Object: [ //Array
        {Title: 'Test', Type: 'Pet', Category: 'Cat', Description: 'Fluffy', Count: 2 }
    ]
};

我能够弄清楚如何正确添加到“对象”数组，但我似乎无法弄清楚基于属性列表（标题、类型、类别等）查询对象的 jQuery 语法.

我将一些测试代码放入点击事件中，并通常检查 Source.Object 的长度（测试数据导致 2 个对象）以确认有数据可以使用（它是通过 ajax 调用填充的）。

function clickTest(category, type) {
    $(Source).find('Object[Category=\"' + category + '\"]').each(function() {
        alert($(this).attr('Category')); //doesn't work
    });
}

查询这样的 JSON 对象的正确方法是什么？

【问题讨论】：

我不得不说，wtf？
对不起，我在这里做错了什么？
@C Bauer：你想做什么？你想用 CSS 选择器查询一个 JavaScript 对象吗？ CSS 选择器和 jQuery 的大部分方法都是为了在 DOM 上使用。
@CBauer：我猜是整件事。我什至不确定你想在这里实现什么。你有一个普通的javascript object，可以以Source.Object.Category 之类的方式访问（名称Object 顺便说一句可能是个坏主意，因为它是一个保留字），但你是试图将该对象拉入 jQuery 构造函数以获取什么？来自 javascript 对象的 jQuery 对象？
@C Bauer：XML 使用 DOM 表示（可以看作是各种 JavaScript 对象的巨大集合）。 JSON 表示没有任何类型的选择器支持或事件的纯 JavaScript 对象。您不需要选择器。您可以使用.-operator 访问对象的属性。

标签： javascript jquery ajax json data-structures

【解决方案1】：

JSON 是 JavaScript 原生的，可以在不使用库 (jQuery) 的情况下循环使用。 [] 代表数组，{} 代表对象，因此：

var obj = Source.Object;
for (var i = 0, len = obj.length; i < len; i++) {
    if (obj[i].Category == category)
        alert(obj[i].Category + ' ' + obj[i].Title);
}

而且这也更快！好东西。

【讨论】：

我一直认为 jQuery 会比构建一个 javascript 循环来进行这些检查更快。
@C Bauer：jQuery 会更短。纯 JavaScript 会更快（因为闭包从其他范围调用变量等）毕竟 jQuery 是用 JavaScript 编写的——调用它并不总是优于自定义解决方案。

【解决方案2】：

源是 JSON 对象，而不是 HTML DOM。因此，您必须对数组使用 jQuery 实用函数：

$.grep( Source.Object, function(e) { return e.Category == category } ).each(...)

【讨论】：

“必须”听起来很极端，不是吗？ :)
+1 - $.grep() 的罕见（大部分）正确使用，.each() 之后会爆炸，它应该被包裹在 $.each(...) 中，因为 .grep() 返回一个数组.
我会更正：“你可以使用 jQuery 实用函数”——它们不是必需的，因为这只是普通的 JavaScript。
很好，我不知道 $.grep(object, function) 但很高兴知道 :)

【解决方案3】：

JSon 是一种将 javascript 对象以字符串格式转录并在线传输的方法。该格式的一个好处是它可以被 javascript 直接读取，因此您的 Source 对象已经准备好进行处理。

function processSource(source, category)
{
    var counter = 0;
    for (counter = 0; counter < source.Object.length; counter += 1)
    {
        if (category === source.Object[counter].category) {
           // do something
        }
    }
}

【讨论】：