it-swarm.com.de

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 man eine bestimmte Person anhand ihres Namens findet und das Alter dieser Person mit jQuery anzeigt. Zum Beispiel möchte ich den JSON nach einer Person namens Peter durchsuchen und, wenn ich eine Übereinstimmung finde, zusätzliche Informationen zu dieser Übereinstimmung anzeigen (in diesem Fall zu einer Person namens Peter), wie zum Beispiel das Alter der Person.

68
Mentalhead
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 diesem 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

93
ifaour

Ich fand das Beispiel von ifaour für jQuery.each () hilfreich, würde aber hinzufügen, dass jQuery.each () unterbrochen (dh gestoppt) werden kann, indem an der Stelle, an der Sie das Gesuchte gefunden haben, 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
        }
});
20
Tapefreak

Sie können Jsel - https://github.com/dragonworx/jsel verwenden (für die vollständige 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.

In Anbetracht Ihrer ursprünglichen Frage würden Sie die Personen mit folgendem Namen finden:

// 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']")
11
Ali

Sobald Sie den JSON in ein JavaScript-Objekt geladen haben, handelt es sich nicht mehr um ein jQuery-Problem, sondern 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 !
9
DuckMaestro

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

Sie können DefiantJS ( http://defiantjs.com ) verwenden, das das globale Objekt JSON mit der Methode "search" erweitert. Mit denen können Sie XPath-Abfragen auf 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/

7
Hakan Bilgin

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

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

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



}
2
cindy

Ich habe eine ähnliche Bedingung und meine Suchabfrage ist nicht auf eine bestimmte Objekteigenschaft beschränkt (wie "John" sollte die Suchabfrage mit Vorname und auch mit Nachname übereinstimmen). Nach einigen Stunden 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;
}
};
2
Hardik Sondagar

Sie müssen jQuery nicht verwenden. Normales 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 gibt, und schrieb daher meine eigene Bibliothek.

Ich habe Regex angepasst, um mit JSON zu arbeiten.

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

"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 (d. H. Denken Sie an:, {,}).

Als Nächstes müssen Sie das JSON-Objekt rekonstruieren. Der von mir erstellte Algorithmus erkennt dazu die JSON-Syntax, indem er vom Übereinstimmungsindex aus rekursiv rückwärts geht. Beispielsweise könnte der Pseudocode folgendermaßen 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

0
mikewhit
0
Luca Fagioli