如何用jQuerysearchJSON树
我有一个关于searchJSON的具体信息的问题。 例如,我有这个JSON文件:
{ "people": { "person": [ { "name": "Peter", "age": 43, "sex": "male" }, { "name": "Zara", "age": 65, "sex": "female" } ] } }
我的问题是,如何find一个特定的人的名字,并显示该人的年龄与jQuery? 例如,我想为一个叫Peter的人来searchJSON,当我find一个匹配的时候,我想显示关于这个匹配的其他信息(关于在这种情况下命名为Peter的人),比如人的年龄。
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
我发现ifaour的例子jQuery.each()是有帮助的,但会补充说,jQuery.each()可以被打破(即停止),通过返回false在你find你正在寻找的点:
$.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和浏览器中运行。
鉴于你原来的问题,你会find与名称的人:
// 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创build自己的模式,并且可以使用较短的expression式,如:
dom.select("//person[@name='Peter']")
一旦将JSON加载到JavaScript对象中,它不再是jQuery问题,而是现在的JavaScript问题。 在JavaScript中你可以写一个search例如:
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 !
你可以使用DefiantJS( http://defiantjs.com )来扩展全局对象JSON和“search”方法。 通过它可以查询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/
有一些js库可以帮助你:
- JSONPath(类似于JSON结构的XPath) – http://goessner.net/articles/JsonPath/
- JSONQuery – https://github.com/JasonSmith/jsonquery
您可能还想看看Lawnchair ,它是一个在浏览器中运行的JSON文档存储,具有各种查询机制。
你可以像这样使用$ .grep()在json对象数组上进行search:
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);
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; }
我有一种类似的条件,加上我的search查询不限于特定的对象属性(如“约翰”search查询应匹配first_name和last_name属性)。 花了几个小时后,我从Google的Angular项目中获得了这个function。 他们已经照顾到每一个可能的情况。
/* 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; } };
使用JavaScript遍历JSON对象树的所有节点
你不必使用jQuery。 普通的JavaScript会做。 我不会推荐任何将XML标准移植到JavaScript上的库,并且我很沮丧,没有其他解决scheme存在,所以我写了自己的库。
我调整了正则expression式来处理JSON。
首先,对JSON对象进行string化。 然后,您需要存储匹配的子string的开始和长度。 例如:
"matched".search("ch") // yields 3
对于一个JSONstring,这是完全相同的(除非你明确search逗号和大括号,在这种情况下,我会推荐你的JSON对象之前执行正则expression式(即认为:,{,})的一些转换。
接下来,您需要重buildJSON对象。 我创作的algorithm通过recursion地从匹配索引向后检测来检测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
有了这些信息,就可以使用正则expression式来过滤JSON对象,以返回键,值和父对象链。