如何使用jQuery搜索JSON树

时间:2011-03-13 10:35:52

标签: javascript jquery json search tree

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

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

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

11 个答案:

答案 0 :(得分:92)

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;
    }
});

Example

根据此answer,您可以使用以下内容:

$(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;
        }
    });
});

Example 2

答案 1 :(得分:19)

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

答案 2 :(得分:11)

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

答案 3 :(得分: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 !

答案 4 :(得分:7)

有一些js库可以帮助你:

您可能还想查看Lawnchair,它是一个JSON-Document-Store,可以在浏览器中运行并具有各种查询机制。

答案 5 :(得分:7)

您可以使用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/

答案 6 :(得分: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);

答案 7 :(得分: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;



}

答案 8 :(得分:2)

我有类似的条件加上我的搜索查询不限于特定的Object属性(例如&#34; John&#34;搜索查询应该与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;
}
};

答案 9 :(得分:0)

答案 10 :(得分:0)

您不必使用jQuery。简单的JavaScript会做。我不推荐任何将XML标准移植到JavaScript上的库,我很沮丧,因为没有其他解决方案存在,所以我编写了自己的库。

我使用正则表达式来使用JSON。

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

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

对于JSON字符串,它的工作方式完全相同(除非您明确搜索逗号和大括号,在这种情况下,我建议在执行正则表达式之前对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/

查看我创作的图书馆和代码