如何使用jQuery搜索JSON树

Question

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

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

我的问题是,如何通过名称找到一个特定的人并用jQuery显示那个人的年龄？例如,我想在JSON中搜索名为Peter的人,当我找到匹配项时,我想显示有关该匹配项的其他信息(例如,在本案例中名为Peter的人),例如人的年龄.

Answer 1

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

Answer 2

我发现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
        }
});

Answer 3

你可以使用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']")

Answer 4

将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 !

Answer 5

有一些js库可以帮助你:

• JSONPath(类似于Jath-Structures的XPath) - http://goessner.net/articles/JsonPath/
• JSONQuery - https://github.com/JasonSmith/jsonquery

您可能还想看看Lawnchair,这是一个JSON-Document-Store,它在浏览器中工作并具有各种查询机制.

Answer 6

您可以使用DefiantJS(http://defiantjs.com),它使用"搜索"方法扩展全局对象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/

Answer 7

您可以使用$ .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);