如何使用 jQuery 搜索 JSON 树

IT技术 javascript jquery json search tree
2021-01-26 12:14:10

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

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

我的问题是,如何通过姓名找到特定的人并使用 jQuery 显示该人的年龄?例如,我想在 JSON 中搜索一个叫 Peter 的人,当我找到一个匹配项时,我想显示有关该匹配项的附加信息(在本例中是关于名为 Peter 的人),例如人的年龄。

6个回答
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来找到我的匹配项?
2021-03-13 12:14:10
最后一个问题,有没有办法使用标准的 jQuery 选择器:[link] api.jquery.com/category/selectors 来选择和查找所需的数据,还是我必须使用 each() 函数?
2021-03-20 12:14:10
@Mentalhead:不,这些方法用于处理 DOM 选择器。您还想遍历您的对象,使用 jQuery 执行此操作正确方法是jQuery方法jQuery.each()
2021-04-07 12:14:10
非常简单和容易的解决方案......就像一个魅力......但绝对需要适当的JSON搜索功能。
2021-04-08 12:14:10
我不知道如何peter用变量替换你的表达式?!我需要从$(this).val(). 有任何想法吗?
2021-04-12 12:14:10

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

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

一旦将 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 !
他的问题似乎假装(根据我的阅读,虽然我可能是错的)jQuery 选择器可用于遍历 JSON,但据我所知,他们不能。所以我的意思是“JavaScript 问题”,意思是 jQuery 的主要功能和选择器功能不适用。
2021-03-22 12:14:10
你什么意思it's no longer a jQuery problem but is now a JavaScript problem?!
2021-03-23 12:14:10
而不是people["person"]andperson_i["name"]你可以写people.personperson_i.name简称。
2021-04-11 12:14:10

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