jQueryでJSONツリーを検索する方法
特定の情報についてJSONを検索することについて質問があります。たとえば、次のJSONファイルがあります。
{
"people": {
"person": [
{
"name": "Peter",
"age": 43,
"sex": "male"
}, {
"name": "Zara",
"age": 65,
"sex": "female"
}
]
}
}
私の質問は、特定の人を名前で見つけてjQueryでその人の年齢を表示するにはどうすればよいですか？たとえば、Peterという名前の人をJSONで検索し、一致が見つかったら、その人の年齢など、その一致に関する追加情報（この場合は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;
}
});
例 。
これに基づいて 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;
}
});
});
IfaourのjQuery.each（）の例が役立つことがわかりましたが、探しているものが見つかった時点でfalseを返すことでjQuery.each（）が壊れる（つまり停止する）可能性があることを追加します。
$.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 !
次のように$ .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);
DefiantJS（ http://defiantjs.com ）を使用して、メソッド「search」でグローバルオブジェクト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/
あなたを助けることができるいくつかのjsライブラリがあります：
- JSONPath（JSON構造のXPathのようなもの）- http://goessner.net/articles/JsonPath/
- JSONQuery- https://github.com/JasonSmith/jsonquery
Lawnchair もご覧ください。これは、ブラウザーで動作し、あらゆる種類のクエリ機構を備えたJSONドキュメントストアです。
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;
}
似たような条件に加えて、特定のオブジェクトプロパティに限定されない検索クエリ（ "John"検索クエリは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;
}
};
JQueryを使用する必要はありません。プレーンなJavaScriptで十分です。 XML標準をJavaScriptに移植するライブラリーはお勧めしません。また、これに対する他のソリューションが存在しないことに不満を感じていたため、独自のライブラリーを作成しました。
JSONで動作するように正規表現を適合させました。
最初に、JSONオブジェクトを文字列化します。次に、一致した部分文字列の開始と長さを保存する必要があります。例えば：
"matched".search("ch") // yields 3
JSON文字列の場合、これはまったく同じように機能します（コンマと中括弧を明示的に検索する場合を除き、正規表現を実行する前にJSONオブジェクトを事前に変換することをお勧めします（つまり、think：、{、}）。
次に、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/ で見ることができます。