Come cercare l’albero JSON con jQuery

Ho una domanda sulla ricerca del JSON per le informazioni specifiche. Ad esempio, ho questo file JSON:

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

La mia domanda è: come posso trovare una determinata persona per nome e mostrare l’età della persona con jQuery? Ad esempio, voglio cercare il JSON per una persona chiamata Peter e quando trovo una corrispondenza voglio visualizzare ulteriori informazioni su quella corrispondenza (sulla persona di nome Peter in questo caso), ad esempio l’età della persona.

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

Esempio

In base a questa risposta , è ansible utilizzare qualcosa come:

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

Esempio 2

Ho trovato utile l’esempio di ifaour di jQuery.each (), ma aggiungo che jQuery.each () può essere interrotto (ovvero, arrestato) restituendo false nel punto in cui hai trovato ciò che stai cercando:

 $.each(json.people.person, function(i, v) { if (v.name == "Peter") { // found it... alert(v.age); return false; // stops the loop } }); 

Potresti usare Jsel – https://github.com/dragonworx/jsel .

Usa un vero motore XPath ed è altamente personalizzabile. Funziona sia in Node.js che nel browser.

Data la tua domanda originale, troverai le persone per nome con:

 // 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 

Se lavoravi sempre con lo stesso schema JSON, potresti creare il tuo schema con jsel, ed essere in grado di usare espressioni più brevi come:

 dom.select("//person[@name='Peter']") 

Una volta caricato il JSON in un object JavaScript, non si tratta più di un problema jQuery, ma ora è un problema JavaScript. In JavaScript è ansible ad esempio scrivere una ricerca come:

 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 ! 

È ansible utilizzare DefiantJS ( http://defiantjs.com ) che estende l’object globale JSON con il metodo “cerca”. Con il quale è ansible interrogare query XPath su strutture JSON. Esempio:

 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; 

Ecco un violino funzionante;
http://jsfiddle.net/hbi99/NhL7p/

Ci sono alcune librerie js che potrebbero aiutarti con questo:

Potresti anche dare un’occhiata a Lawnchair , che è un JSON-Document-Store che funziona nel browser e ha tutti i tipi di meccanismi di interrogazione.

Puoi cercare su un array di oggetti json usando $ .grep () in questo modo:

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

Ho una specie di condizione simile più la mia query di ricerca non limitata a particolari proprietà dell’object (come “John” la query di ricerca deve corrispondere a first_name e anche alla proprietà last_name). Dopo aver trascorso alcune ore, ho ottenuto questa funzione dal progetto Angular di Google. Si sono presi cura di tutti i casi possibili.

 /* 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; } }; 

Attraversa tutti i nodes di un albero oggetti JSON con JavaScript

Non devi usare jQuery. JavaScript semplice funzionerà. Non consiglierei alcuna libreria che porti gli standard XML su JavaScript, ed ero frustrato dal fatto che non esistesse altra soluzione per questo motivo, quindi ho scritto la mia libreria.

Ho adattato regex per lavorare con JSON.

Per prima cosa, stringa l’object JSON. Quindi, è necessario memorizzare le partenze e le lunghezze delle sottostringhe corrispondenti. Per esempio:

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

Per una stringa JSON, funziona esattamente allo stesso modo (a meno che tu non stia cercando esplicitamente le virgole e le parentesi graffe, nel qual caso raccomanderei alcune trasformazioni precedenti del tuo object JSON prima di eseguire espressioni regolari (ovvero pensare:, {,}).

Successivamente, è necessario ribuild l’object JSON. L’algoritmo che ho creato lo fa rilevando la syntax JSON andando in modo ricorsivo dall’indice della partita. Ad esempio, lo pseudo codice potrebbe apparire come segue:

 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 

Con queste informazioni, è ansible utilizzare regex per filtrare un object JSON per restituire la chiave, il valore e la catena di oggetti padre.

Puoi vedere la libreria e il codice che ho creato su http://json.spiritway.co/