Как искать дерево JSON с помощью jQuery
У меня есть вопрос о поиске JSON для конкретной информации. Например, у меня есть этот файл JSON:
{
"people": {
"person": [
{
"name": "Peter",
"age": 43,
"sex": "male"
}, {
"name": "Zara",
"age": 65,
"sex": "female"
}
]
}
}
мой вопрос в том, как найти конкретного человека по имени и отобразить возраст этого человека с помощью jQuery? Например, я хочу найти в JSON человека по имени Питер, и когда я найду совпадение, я хочу отобразить дополнительную информацию об этом совпадении (о человеке по имени Питер в этом случае), например, возраст человека.
11 ответов:
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; } }); });
Я нашел пример jQuery ifaour.каждый (), чтобы быть полезным, но добавил бы, что jQuery.каждый () может быть сломан (то есть остановлен), возвращая 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 и легко настраивается. Выполняется в обоих узлах.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 !
вы можете использовать DefiantJS (http://defiantjs.com), который расширяет глобальный объект JSON с помощью метода "поиск". С помощью которого вы можете запрашивать запросы XPath в структурах JSON. Пример:
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 (что-то вроде XPath для JSON-структур) -http://goessner.net/articles/JsonPath/
- JSONQuery -https://github.com/JasonSmith/jsonquery
вы также можете взглянуть на шезлонге, который является JSON-Document-Store, который работает в браузере и имеет все виды механизмов запросов.
вы можете искать в массиве объектов json с помощью $.команда grep() такой:
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; }
У меня есть похожее условие плюс мой поисковый запрос, не ограниченный конкретным свойством объекта ( например, поисковый запрос "John" должен быть сопоставлен с first_name, а также с last_name ). Проведя несколько часов, я получил эту функцию от Google Угловое. Они позаботились обо всех возможных случаях.
/* 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
С этой информацией, можно использовать regex для отфильтруйте объект JSON, чтобы вернуть ключ, значение и цепочку родительских объектов.
вы можете увидеть библиотеку и код, который я создал в http://json.spiritway.co/