如何使用jQuery搜索JSON树


75

我有一个关于在JSON中搜索特定信息的问题。例如,我有这个JSON文件:

 {
    "people": {
        "person": [
            {
                "name": "Peter",
                "age": 43,
                "sex": "male"
            }, {
                "name": "Zara",
                "age": 65,
                "sex": "female"
            }
        ]
    }
}

我的问题是,如何通过名称查找特定的人并使用jQuery显示该人的年龄?例如,我想在JSON中搜索一个叫Peter的人,当我找到一个匹配项时,我想显示有关该匹配项的其他信息(在这种情况下,关于名为Peter的人),例如人的年龄。

Answers:


100
var json = {
    "people": {
        "person": [{
            "name": "Peter",
            "age": 43,
            "sex": "male"},
        {
            "name": "Zara",
            "age": 65,
            "sex": "female"}]
    }
};
$.each(json.people.person, function(i, v) {
    if (v.name == "Peter") {
        alert(v.age);
        return;
    }
});

实例

根据此答案,您可以使用类似:

$(function() {
    var json = {
        "people": {
            "person": [{
                "name": "Peter",
                "age": 43,
                "sex": "male"},
            {
                "name": "Zara",
                "age": 65,
                "sex": "female"}]
        }
    };
    $.each(json.people.person, function(i, v) {
        if (v.name.search(new RegExp(/peter/i)) != -1) {
            alert(v.age);
            return;
        }
    });
});

例子2


您的示例效果很好,但是我想知道我是否可以使用类似的方法:[link] api.jquery.com/attribute-equals-selector查找我的匹配项?
Mentalhead 2011年

1
最后一个问题,是否有一种使用标准jQuery选择器的方法:[link] api.jquery.com/category/selectors 来选择和查找所需的数据,还是我必须使用each()函数?
Mentalhead 2011年

1
@Mentalhead:不,这些方法用于处理DOM选择器。另外,您还想遍历对象,使用jQuery的正确方法是jQuery方法jQuery.each()
ifaour 2011年

2
我想不通如何peter用一个变量替换您的表达式?我需要从中插入一个字符串$(this).val()。有任何想法吗?
yckart

非常简单易用的解决方案..就像一个魅力..一样,但是绝对需要适当的JSON搜索功能。
UberNeo

20

我发现ifaour的jQuery.each()示例很有帮助,但会添加jQuery.each()可以通过在找到的位置返回false来破坏(即停止):

$.each(json.people.person, function(i, v) {
        if (v.name == "Peter") {
            // found it...
            alert(v.age);
            return false; // stops the loop
        }
});

12

您可以使用Jsel- https://github.com/dragonworx/jsel(为全面披露,我是该库的所有者)。

它使用了真正的XPath引擎,并且高度可定制。在Node.js和浏览器中运行。

提出您的原始问题后,您将通过以下姓名找到这些人:

// include or require jsel library (npm or browser)
var dom = jsel({
    "people": {
        "person": [{
            "name": "Peter",
            "age": 43,
            "sex": "male"},
        {
            "name": "Zara",
            "age": 65,
            "sex": "female"}]
    }
});
var person = dom.select("//person/*[@name='Peter']");
person.age === 43; // true

如果您始终使用相同的JSON模式,则可以使用jsel创建自己的模式,并能够使用较短的表达式,例如:

dom.select("//person[@name='Peter']")

9

将JSON加载到JavaScript对象后,它不再是jQuery问题,而是现在的JavaScript问题。例如,在JavaScript中,您可以编写搜索,例如:

var people = myJson["people"];
var persons = people["person"];
for(var i=0; i < persons.length; ++i) {
    var person_i = persons[i];
    if(person_i["name"] == mySearchForName) {
        // found ! do something with 'person_i'.
        break;
    }
}
// not found !

而不是people["person"]和,person_i["name"]您可以写作people.personperson_i.name简称。
rsp

2
你是什​​么意思it's no longer a jQuery problem but is now a JavaScript problem
ifaour 2011年

2
他的问题似乎冒充了(通过我的阅读,虽然我可能错了),但jQuery选择器可用于遍历JSON,而据我所知,它们是无法做到的。因此,我的意思是“ JavaScript问题”,因为jQuery的主要功能和选择器功能不适用。
DuckMaestro 2011年

9

您可以使用$ .grep()在json对象数组上进行搜索,如下所示:

var persons = {
    "person": [
        {
            "name": "Peter",
            "age": 43,
            "sex": "male"
        }, {
            "name": "Zara",
            "age": 65,
            "sex": "female"
        }
      ]
   }
};
var result = $.grep(persons.person, function(element, index) {
   return (element.name === 'Peter');
});
alert(result[0].age);

8

您可以使用DefiantJS(http://defiantjs.com),它使用方法“ search”扩展了全局对象JSON。使用它可以查询有关JSON结构的XPath查询。例:

var byId = function(s) {return document.getElementById(s);},
data = {
   "people": {
      "person": [
         {
            "name": "Peter",
            "age": 43,
            "sex": "male"
         },
         {
            "name": "Zara",
            "age": 65,
            "sex": "female"
         }
      ]
   }
},
res = JSON.search( data, '//person[name="Peter"]' );

byId('name').innerHTML = res[0].name;
byId('age').innerHTML = res[0].age;
byId('sex').innerHTML = res[0].sex;

这是一个工作的小提琴。
http://jsfiddle.net/hbi99/NhL7p/


8

有一些js库可以为您提供帮助:

您可能还想看看Lawnchair,它是一个JSON文档存储区,可在浏览器中使用,并具有各种查询机制。


还有Jsel-github.com/dragonworx/jsel-它使用了真正的XPath引擎,并允许您自定义架构,以便在需要时可以创建更好的表达式。
阿里

草坪椅看起来很有趣..任何有用的例子?
UberNeo

您可以使用dragonworx.github.io/jsel上的在线交互式工具尝试不同的表达式,“ XPath示例”下拉列表中有一些示例。
阿里

2
    var GDNUtils = {};

GDNUtils.loadJquery = function () {
    var checkjquery = window.jQuery && jQuery.fn && /^1\.[3-9]/.test(jQuery.fn.jquery);
    if (!checkjquery) {

        var theNewScript = document.createElement("script");
        theNewScript.type = "text/javascript";
        theNewScript.src = "http://code.jquery.com/jquery.min.js";

        document.getElementsByTagName("head")[0].appendChild(theNewScript);

        // jQuery MAY OR MAY NOT be loaded at this stage


    }
};



GDNUtils.searchJsonValue = function (jsonData, keytoSearch, valuetoSearch, keytoGet) {
    GDNUtils.loadJquery();
    alert('here' + jsonData.length.toString());
    GDNUtils.loadJquery();

    $.each(jsonData, function (i, v) {

        if (v[keytoSearch] == valuetoSearch) {
            alert(v[keytoGet].toString());

            return;
        }
    });



};




GDNUtils.searchJson = function (jsonData, keytoSearch, valuetoSearch) {
    GDNUtils.loadJquery();
    alert('here' + jsonData.length.toString());
    GDNUtils.loadJquery();
    var row;
    $.each(jsonData, function (i, v) {

        if (v[keytoSearch] == valuetoSearch) {


            row  = v;
        }
    });

    return row;



}

2

我有类似的情况,加上我的搜索查询不限于特定的Object属性(例如“ John”,搜索查询应与first_name以及last_name属性匹配)。花了几个小时后,我从Google的Angular项目获得了此功能。他们已经照顾了所有可能的情况。

/* Seach in Object */

var comparator = function(obj, text) {
if (obj && text && typeof obj === 'object' && typeof text === 'object') {
    for (var objKey in obj) {
        if (objKey.charAt(0) !== '$' && hasOwnProperty.call(obj, objKey) &&
                comparator(obj[objKey], text[objKey])) {
            return true;
        }
    }
    return false;
}
text = ('' + text).toLowerCase();
return ('' + obj).toLowerCase().indexOf(text) > -1;
};

var search = function(obj, text) {
if (typeof text == 'string' && text.charAt(0) === '!') {
    return !search(obj, text.substr(1));
}
switch (typeof obj) {
    case "boolean":
    case "number":
    case "string":
        return comparator(obj, text);
    case "object":
        switch (typeof text) {
            case "object":
                return comparator(obj, text);
            default:
                for (var objKey in obj) {
                    if (objKey.charAt(0) !== '$' && search(obj[objKey], text)) {
                        return true;
                    }
                }
                break;
        }
        return false;
    case "array":
        for (var i = 0; i < obj.length; i++) {
            if (search(obj[i], text)) {
                return true;
            }
        }
        return false;
    default:
        return false;
}
};


0

您不必使用jQuery。普通的JavaScript即可。我不推荐任何将XML标准移植到JavaScript上的库,而令我沮丧的是没有其他解决方案,因此我编写了自己的库。

我修改了正则表达式以使用JSON。

首先,对JSON对象进行字符串化。然后,您需要存储匹配的子字符串的开始和长度。例如:

"matched".search("ch") // yields 3

对于JSON字符串,其工作原理完全相同(除非您要明确搜索逗号和大括号,否则在执行regex之前,我建议您先对JSON对象进行一些先转换(例如::,{,})。

接下来,您需要重构JSON对象。我编写的算法通过从匹配索引递归地检测到JSON语法来做到这一点。例如,伪代码可能如下所示:

find the next key preceding the match index, call this theKey
then find the number of all occurrences of this key preceding theKey, call this theNumber
using the number of occurrences of all keys with same name as theKey up to position of theKey, traverse the object until keys named theKey has been discovered theNumber times
return this object called parentChain

利用此信息,可以使用正则表达式来过滤JSON对象以返回键,值和父对象链。

您可以在http://json.spiritway.co/上看到我编写的库和代码。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.