So durchsuchen Sie den JSON-Baum mit jQuery

Ich habe eine Frage zum Durchsuchen des JSON nach bestimmten Informationen. Zum Beispiel habe ich diese JSON-Datei:

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

Meine Frage ist, wie kann man mit jQuery eine bestimmte Person anhand ihres Namens finden und das Alter dieser Person anzeigen? Zum Beispiel möchte ich den JSON nach einer Person namens Peter durchsuchen und wenn ich eine Übereinstimmung finde, möchte ich zusätzliche Informationen zu dieser Übereinstimmung (in diesem Fall zur Person namens Peter) anzeigen, wie zum Beispiel das Alter der Person.

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

Beispiel .

Basierend auf dieser Antwort könnten Sie Folgendes verwenden:

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

Beispiel 2

Ich fand ifaours Beispiel für jQuery.each () hilfreich, fügte aber hinzu, dass jQuery.each () beschädigt (dh gestoppt) werden kann, indem an der Stelle, an der Sie gefunden haben, wonach Sie suchen, false zurückgegeben wird:

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

Sie können Jsel - https://github.com/dragonworx/jsel verwenden (zur vollständigen Offenlegung bin ich der Eigentümer dieser Bibliothek).

Es verwendet eine echte XPath-Engine und ist hochgradig anpassbar. Läuft sowohl in Node.js als auch im Browser.

Bei Ihrer ursprünglichen Frage würden Sie die Personen mit Namen finden mit:

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

Wenn Sie immer mit demselben JSON-Schema gearbeitet haben, können Sie mit jsel ein eigenes Schema erstellen und kürzere Ausdrücke wie die folgenden verwenden.

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

Sobald Sie den JSON in ein JavaScript-Objekt geladen haben, handelt es sich nicht mehr um ein jQuery-Problem, sondern jetzt um ein JavaScript-Problem. In JavaScript können Sie beispielsweise eine Suche schreiben wie:

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 !

Sie können mit $ .grep () wie folgt in einem JSON-Objektarray suchen:

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

Sie können DefiantJS ( http://defiantjs.com ) verwenden, das das globale Objekt JSON mit der Methode "search" erweitert. Mit dieser Funktion können Sie XPath-Abfragen für JSON-Strukturen abfragen. Beispiel:

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;

Hier ist eine funktionierende Geige;
http://jsfiddle.net/hbi99/NhL7p/

Es gibt einige js-Bibliotheken, die Ihnen dabei helfen könnten:

• JSONPath (so etwas wie XPath für JSON-Strukturen) - http://goessner.net/articles/JsonPath/
• JSONQuery - https://github.com/JasonSmith/jsonquery

Vielleicht möchten Sie auch einen Blick auf Lawnchair werfen , einen JSON-Document-Store, der im Browser funktioniert und über alle möglichen Abfragemechanismen verfügt.

    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;



}

Ich habe eine ähnliche Bedingung und meine Suchabfrage ist nicht auf eine bestimmte Objekteigenschaft beschränkt (wie "John" sollte die Suchabfrage mit der Eigenschaft Vorname und auch mit der Eigenschaft Nachname übereinstimmen). Nachdem ich einige Stunden verbracht hatte, bekam ich diese Funktion aus Googles Angular- Projekt. Sie haben sich um alle möglichen Fälle gekümmert.

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

Durchlaufen Sie alle Knoten eines JSON-Objektbaums mit JavaScript

Sie müssen jQuery nicht verwenden. Einfaches JavaScript reicht aus. Ich würde keine Bibliothek empfehlen, die XML-Standards auf JavaScript portiert, und ich war frustriert, dass es dafür keine andere Lösung gab, also schrieb ich meine eigene Bibliothek.

Ich habe Regex für die Arbeit mit JSON angepasst.

Stringifizieren Sie zunächst das JSON-Objekt. Anschließend müssen Sie die Starts und Längen der übereinstimmenden Teilzeichenfolgen speichern. Zum Beispiel:

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

Bei einer JSON-Zeichenfolge funktioniert dies genauso (es sei denn, Sie suchen explizit nach Kommas und geschweiften Klammern. In diesem Fall würde ich eine vorherige Transformation Ihres JSON-Objekts empfehlen, bevor Sie Regex ausführen (z. B.:, {,}).

Als Nächstes müssen Sie das JSON-Objekt rekonstruieren. Der von mir erstellte Algorithmus erkennt dazu die JSON-Syntax, indem er vom Übereinstimmungsindex rekursiv rückwärts geht. Beispielsweise könnte der Pseudocode wie folgt aussehen:

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

Mit diesen Informationen kann ein JSON-Objekt mithilfe von Regex gefiltert werden, um den Schlüssel, den Wert und die übergeordnete Objektkette zurückzugeben.

Sie können die Bibliothek und den Code sehen, die ich unter http://json.spiritway.co/ verfasst habe.