如何使用 jQuery 搜索 JSON 树
Posted
技术标签:
【中文标题】如何使用 jQuery 搜索 JSON 树【英文标题】：How to search JSON tree with jQuery 【发布时间】：2011-07-14 09:57:36 【问题描述】：我有一个关于在 JSON 中搜索特定信息的问题。例如，我有这个 JSON 文件：
"people":
"person": [
"name": "Peter",
"age": 43,
"sex": "male"
,
"name": "Zara",
"age": 65,
"sex": "female"
]
我的问题是，如何使用 jQuery 按姓名查找特定人并显示该人的年龄？ 例如，我想在 JSON 中搜索一个叫 Peter 的人，当我找到匹配项时，我想显示有关该匹配项的附加信息（在本例中是关于名为 Peter 的人），例如人的年龄。
【问题讨论】：
【参考方案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;
);
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
【讨论】：
你的例子效果很好，但我想知道我能不能用这样的东西：[link]api.jquery.com/attribute-equals-selector 来找到我的匹配项？ 最后一个问题，有没有办法使用标准的 jQuery 选择器：[link]api.jquery.com/category/selectors 来选择和查找所需的数据还是必须使用 each() 函数？ @Mentalhead：不，这些方法用于处理 DOM 选择器。此外，您还想遍历您的对象，而使用 jQuery 的 正确 方法是 jQuery 方法 jQuery.each() 我无法弄清楚如何用变量替换表达式中的peter？！我需要从$(this).val() 插入一个字符串。有什么想法吗？
非常简单易行的解决方案 .. 效果很好 .. 但肯定需要适当的 JSON 搜索功能。【参考方案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
);
【讨论】：
【参考方案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']")
【讨论】：
【参考方案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 !
【讨论】：
你可以写成people.person和person_i.name，而不是people["person"]和person_i["name"]。
it's no longer a jQuery problem but is now a JavaScript problem 是什么意思？！
他的问题似乎有一个借口（根据我的阅读，虽然我可能是错的）jQuery 选择器可以用来遍历 JSON，但据我所知他们不能。所以我的意思是“一个 JavaScript 问题”，因为 jQuery 的主要功能和选择器功能不适用。【参考方案5】：
您可以像这样使用 $.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);
【讨论】：
【参考方案6】：有一些 js 库可以帮助您：
JSONPath（类似于用于 JSON 结构的 XPath）-http://goessner.net/articles/JsonPath/ JSONQuery - https://github.com/JasonSmith/jsonquery GROQ - https://github.com/sanity-io/GROQ您可能还想看看Lawnchair，它是一个在浏览器中运行并具有各种查询机制的 JSON-Document-Store。
【讨论】：
还有 Jsel - github.com/dragonworx/jsel - 它使用真正的 XPath 引擎并允许您自定义架构，以便在需要时创建更好的表达式。 草坪椅看起来很有趣..有什么有用的例子吗？？ 您可以使用在线互动工具dragonworx.github.io/jsel 尝试不同的表达方式，“XPath 示例”下拉列表中有一些示例。【参考方案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/
【讨论】：
【参考方案8】： 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;
【讨论】：
【参考方案9】：我有一种类似的条件加上我的搜索查询不限于特定的对象属性（比如“约翰”搜索查询应该与 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;
;
【讨论】：
【参考方案10】：Traverse all the Nodes of a JSON Object Tree with JavaScript
【讨论】：
【参考方案11】：您不必使用 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/看到我编写的库和代码
【讨论】：
以上是关于如何使用 jQuery 搜索 JSON 树的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript 或 jquery 从 JSON 中搜索文本
如何使用Javascript或JQuery搜索巨大的JSON
javascript-如何在 json 字符串上使用正则表达式来搜索 JQuery 中的数据表列？