ToolPal
Leuchtende Daten fließen durch Glasfaserkabel

JSONPath im Browser: Eine praktische Referenz und ein Tester für die Muster, die Sie tatsächlich verwenden

📷 Pixabay / Pexels

JSONPath im Browser: Eine praktische Referenz und ein Tester für die Muster, die Sie tatsächlich verwenden

Hören Sie auf zu raten, ob Ihre JSONPath-Abfrage das findet, was Sie erwarten. Ein praktischer Leitfaden zu Filtern, Slices und dem rekursiven Abstiegsoperator — mit kostenlosem Tester.

DVon Daniel Park26. April 202611 Min. Lesezeit

Ich arbeite lange genug mit APIs, um mich daran zu erinnern, als XML der Standard war und XPath die Abfragesprache, die jeder lernte. JSONPath ist das JSON-Äquivalent, und nach Jahren des Vermeidens (weil ich einfach JavaScript schreiben konnte, oder?) habe ich umgedacht. Es gibt zu viele Orte, an denen JSONPath die einzige verfügbare Sprache ist — Postman-Variablen, AWS Step Functions, Kubernetes-Selektoren, Datadog-Filter — und fließend zu sein, spart echte Zeit.

Dieser Leitfaden ist die Referenz, die ich mir gewünscht hätte, als ich anfing. Wir behandeln die Syntax, die tatsächlich in der Produktion auftaucht, die Stolpersteine, die mich Stunden gekostet haben, und wie der JSONPath Tester bei ToolBox Hubs Sie Ihre Ausdrücke prüfen lässt, bevor Sie sie irgendwo Folgenreiches einfügen.

Was JSONPath ist, kurz

JSONPath ist eine Abfragesprache für JSON-Dokumente. Sie geben ihm einen Ausdruck wie $.store.book[*].author und er gibt alle übereinstimmenden Werte zurück. Das $ ist die Wurzel, die Punkte und Klammern navigieren in die Struktur, und spezielle Operatoren erlauben Filtern, Slicen und rekursives Durchlaufen.

Wenn Sie XPath für XML verwendet haben, überträgt sich das mentale Modell direkt. Falls nicht, denken Sie an es als eine mächtigere Version der Punktnotation in JavaScript — eine, die "alle Bücher mit Preis unter $10" oder "jeder Autor in beliebiger Tiefe im Dokument" in einer Zeile ausdrücken kann.

Das kanonische Beispiel, das jeder verwendet, kommt aus dem Originalartikel von Stefan Goessner:

{
  "store": {
    "book": [
      { "category": "fiction", "author": "Tolkien", "price": 22.99 },
      { "category": "reference", "author": "Rees", "price": 8.95 }
    ],
    "bicycle": { "color": "red", "price": 19.95 }
  }
}

$.store.book[*].author gibt ["Tolkien", "Rees"] zurück. $..price gibt [22.99, 8.95, 19.95] zurück. $.store.book[?(@.price < 10)] gibt das zweite Buchobjekt zurück. Das ist das ganze Spiel.

Die Operatoren, die Sie zu 90% der Zeit verwenden werden

Es gibt Dutzende von JSONPath-Operatoren. Fünf davon decken fast alles ab, was Sie in der Praxis schreiben werden.

$ — Die Wurzel

Jeder JSONPath-Ausdruck beginnt mit $. Es bezieht sich auf das oberste Element des Dokuments. Sie können es technisch weglassen (manche Bibliotheken sind nachsichtig), aber es explizit zu schreiben, macht die Absicht klar.

.field — Kindzugriff

Standard-Punktnotation. $.users.0.email läuft von der Wurzel zum users-Array, wählt Index 0 und liest email. Dasselbe wie JavaScript, außer dass die 0 als Eigenschaftsname funktioniert.

[n] — Array-Index

Klammernotation für Array-Zugriff, nützlich wenn Indizes dynamisch sind oder der Feldname Sonderzeichen hat. $.users[0], $.users[-1] (letztes Element), $.users[0:3] (Slice von 0 bis 3 exklusiv).

Negative Indizes zählen vom Ende. $.users[-1] ist der letzte Benutzer. $.users[-3:] ergibt die letzten drei. Dies wird nicht in jeder Implementierung unterstützt — RFC 9535 standardisiert es, aber prüfen Sie Ihre Bibliothek, wenn Sie davon abhängen.

[*] — Wildcard

Trifft auf alle Elemente in einem Array oder alle Werte in einem Objekt zu. $.users[*].email gibt jede E-Mail jedes Benutzers zurück. $.config.* gibt jeden Wert im config-Objekt zurück. Kombiniert mit Eigenschaftszugriff ist dies, wie Sie übliche Strukturen abflachen.

..field — Rekursiver Abstieg

Der mächtigste Operator und der, den ich am meisten verwende. $..price findet jedes price-Feld irgendwo im Dokument, egal wie tief verschachtelt. Nützlich, wenn Sie die genaue Struktur nicht kennen oder nicht wichtig finden.

Der Abstieg kümmert sich nicht um den Pfad — er findet einfach alles, was dem Muster entspricht. Das macht ihn großartig für Ad-hoc-Datenexploration ("enthält diese Antwort irgendwelche Benutzer-IDs?") und gefährlich, wenn Ihre Daten denselben Schlüsselnamen in verschiedenen Kontexten haben (ein name-Feld bei Benutzern und ein name-Feld bei Rollen werden beide auf $..name zutreffen).

Filter: Wo Leute hängenbleiben

Filterausdrücke werden als [?(...)] geschrieben, wobei der Inhalt ein boolescher Ausdruck ist, der gegen jedes Element in einem Array ausgewertet wird. Innerhalb des Filters bezieht sich @ auf das aktuelle Element.

$.store.book[?(@.price < 10)]
$.users[?(@.role == 'admin')]
$.events[?(@.timestamp > 1700000000)]

Das @ ist der Teil, an dem Leute stolpern. Es ist das Äquivalent zu this oder dem aktuellen Element in einem forEach. Ohne es kann der Filter kein Feld referenzieren — [?(price < 10)] funktioniert nicht, weil price undefiniert ist; die Engine weiß nicht, dass sie ins aktuelle Element schauen soll.

Vergleichsoperatoren

Universell über Bibliotheken hinweg: ==, !=, <, >, <=, >=.

Die rechte Seite kann ein Literal sein: eine Zahl (@.age > 18), ein einfach-gequoteter String (@.role == 'admin'), ein doppelt-gequoteter String, true, false oder null.

Was NICHT universell ist: Vergleichen zweier Felder miteinander (@.price > @.cost), Regex-Matching (@.email =~ /.*@example\.com/), Funktionsaufrufe wie length() oder match(). Manche Bibliotheken unterstützen diese; viele nicht. Der JSONPath Tester bei ToolBox Hubs unterstützt die grundlegenden Vergleiche gegen Literalwerte, was die überwiegende Mehrheit echter Abfragen abdeckt.

Boolesche Kombinationen

Standardimplementierungen unterstützen && und || für die Kombination von Bedingungen:

$.products[?(@.in_stock == true && @.price < 50)]
$.events[?(@.severity == 'error' || @.severity == 'critical')]

Wenn Sie sich beim Schreiben komplexer boolescher Logik in JSONPath ertappen, ist das meist ein Signal, auf echten Code umzusteigen — Ihr zukünftiges Ich, das den Ausdruck in sechs Monaten liest, wird Ihnen danken. JSONPath glänzt bei einfachen Auswahlen; komplexe Geschäftslogik gehört in eine echte Sprache.

Slices: Wenn Sie nur einige Elemente brauchen

[start:end:step] funktioniert genau wie Python-Slicing.

  • [0:5] — die ersten 5 Elemente
  • [5:] — von Index 5 aufwärts
  • [:3] — die ersten 3 Elemente (gleich wie [0:3])
  • [-3:] — die letzten 3 Elemente
  • [::2] — jedes zweite Element
  • [::-1] — umgekehrt (nicht überall unterstützt)

Slicing ist einer der saubereren Teile von JSONPath. Es ist eine direkte Portierung von Python und verhält sich vorhersagbar. Ich verwende es viel für "gib mir die ersten N Ergebnisse" oder "gib mir alles außer dem ersten" Muster.

Muster, die tatsächlich bei der Arbeit auftauchen

Theorie ist gut; schauen wir uns die echten Abfragen an.

Filtern von API-Antworten

Ihre API gibt paginierte Ergebnisse zurück und Sie wollen bestimmte Elemente finden. JSONPath in Ihrem Test-Framework oder Postman:

$.data[?(@.status == 'active')].id

Gibt die IDs aller aktiven Elemente zurück. Wenn die API keinen "Filter nach Status"-Parameter hat, ist dies schneller als Transformation im Code.

Werte aus Webhook-Payloads extrahieren

Sie verarbeiten Webhooks von Stripe, GitHub oder ähnlichen und müssen bestimmte Felder ergreifen. JSONPath in AWS EventBridge-Regeln, Step Functions oder Logic Apps:

$.detail.payload.items[*].sku

Gibt die SKU jedes Elements in einer Bestellung zurück. Cloud-Workflow-Tools verlassen sich auf JSONPath, weil es deklarativ und prüfbar ist, während eingebettetes JavaScript eine Sicherheits- und Wartungslast wäre.

Elemente in tief verschachtelten Daten finden

Sie kennen die genaue Struktur nicht, aber Sie wissen, dass irgendwo eine Benutzer-ID ist:

$..userId

Gibt jedes userId-Feld im Dokument zurück, unabhängig von der Verschachtelungstiefe. Nützlich für die Exploration bei der Arbeit mit unbekannten API-Antworten oder Drittanbieter-Integrationen.

Schema-ähnliche Einschränkungen validieren

Sie müssen prüfen, dass alle Elemente in einer Liste ein bestimmtes Feld haben:

$.users[?(!@.email)]

Gibt Benutzer ohne E-Mail zurück. Wenn das Ergebnis leer ist, sind Ihre Daten sauber. Dieses Muster funktioniert gut in CI-Testskripten, in denen Sie eine JSON-Ausgabe parsen und ihre Struktur prüfen.

Die Stolpersteine (eine persönliche Liste)

Das sind die Dinge, die mich Stunden gekostet haben.

Das @ in Filtern ist obligatorisch. [?(price < 10)] statt [?(@.price < 10)] zu schreiben, ist der häufigste Fehler. Ohne @ weiß die Engine nicht, dass price ein Feld am aktuellen Element bezeichnet.

Filter geben übereinstimmende Elemente zurück, nicht das Feld, nach dem Sie gefiltert haben. $..book[?(@.price < 10)] gibt Buch-Objekte zurück, nicht Preise. Um nur die Preise zu erhalten: $..book[?(@.price < 10)].price.

Anführungszeichen sind innerhalb von Ausdrücken wichtig. Verwenden Sie einfache Anführungszeichen innerhalb von JSONPath-Strings, um Verwechslung mit der umgebenden Sprache zu vermeiden. In einer JSON-Konfigurationsdatei ist Ihr JSONPath ein String-Wert, also verwendet der JSONPath selbst einfache Anführungszeichen: "$.users[?(@.role == 'admin')]". Sie zu verwechseln, erzeugt Parse-Fehler.

Rekursiver Abstieg findet Schatten-Treffer. $..name trifft auf jedes name-Feld zu, auch auf solche in nicht verwandten verschachtelten Objekten. Wenn Sie Benutzer-name-Felder und Produkt-name-Felder im selben Dokument haben, gibt dies beide zurück. Seien Sie spezifisch, wenn es darauf ankommt.

Index 0 vs. Eigenschaft '0'. $.items[0] funktioniert auf Arrays. $.items.0 funktioniert eventuell — die meisten Parser lehnen es für Arrays ab (es ist klammern-only) akzeptieren es aber als Eigenschaftsname auf Objekten. Bleiben Sie bei Klammern für Array-Zugriff.

Leere Ergebnisse sind keine Fehler. Wenn Ihr JSONPath nichts trifft, erhalten Sie ein leeres Array [], keine Ausnahme. Das ist korrektes Verhalten, kann aber Tippfehler verbergen. Wenn Sie Ergebnisse erwartet haben und keine bekommen, prüfen Sie den Pfad doppelt.

RFC 9535 vs. Goessner-Era-Bibliotheken

Der ursprüngliche Artikel von 2007, der JSONPath definierte, war informell — er beschrieb Syntax mit Beispielen, spezifizierte aber das Verhalten in Edge Cases nicht formal. Verschiedene Bibliotheksimplementierungen trafen unterschiedliche Entscheidungen, und über die Jahre sammelten sich die Unterschiede an.

Im Jahr 2024 wurde RFC 9535 als offizielle Spezifikation veröffentlicht. Sie standardisiert Syntax und Semantik, insbesondere bei:

  • Grammatik von Filterausdrücken
  • Funktionserweiterungen (length, count, match, search, value)
  • Normalisierte Pfade in der Ausgabe (jedes Ergebnis enthält seinen Standort)
  • I-Regexp-Profil für Regex-Matching

Wenn Sie ein neues Projekt starten, bevorzugen Sie Bibliotheken, die auf RFC 9535 abzielen — jsonpath-rfc9535 für Node, jsonpath-rfc9535 Python-Ports, jp CLI-Tool. Wenn Sie bestehenden Code pflegen, sind Sie wahrscheinlich auf einer Goessner-Era-Implementierung; das ist in Ordnung, wissen Sie nur, dass die Unterschiede existieren.

Der JSONPath Tester bei ToolBox Hubs implementiert die häufigsten Operatoren, die konsistent über Implementierungen hinweg funktionieren. Er ist absichtlich konservativ bei Filtersyntax, um nicht Dinge zu testen, die in Ihrer Zielumgebung nicht funktionieren.

Wo JSONPath gegen jq verliert

Ich würde Sie in die Irre führen, wenn ich jq nicht erwähnen würde.

JSONPath ist gut darin, Werte in JSON zu finden. jq ist gut darin, JSON zu finden UND zu transformieren. Wenn Sie:

  • Objekte in eine andere Form projizieren (.users | map({id, email}))
  • Werte aggregieren (map(.price) | add)
  • Mehrere Operationen komponieren
  • Komplexe bedingte Logik handhaben

ist jq dramatisch besser. JSONPath hat keine Aggregation, keine map/reduce und keine Funktionskomposition. Das sind keine Bugs — es sind Scope-Entscheidungen. JSONPath ist eine Abfragesprache. jq ist eine Transformationssprache.

Das richtige Werkzeug hängt von Ihrer Umgebung ab. JSONPath ist überall, weil es einfach einzubetten ist (keine Abhängigkeiten, nur ein String-Parser). jq erfordert eine Binary und ist in Browser-Kontexten oder eingeschränkten Umgebungen schwerer zu verwenden. In einem Postman-Test oder einer Step Function-Eingabezuordnung haben Sie nur JSONPath. In einer Shell-Pipeline oder einer serverseitigen Datentransformation ist jq meist besser.

Ein praktischer Workflow

So verwende ich JSONPath jetzt tatsächlich:

  1. Öffnen Sie die API-Antwort oder das JSON-Dokument im JSON Formatter, um es lesbar zu machen.

  2. Identifizieren Sie den Wert oder die Werte, die Sie extrahieren möchten. Normalerweise kann ich den Pfad mental nachzeichnen: "users-Array, Element N, role-Feld, gleich admin."

  3. Öffnen Sie den JSONPath Tester, fügen Sie das JSON ein und schreiben Sie den Ausdruck. Iterieren Sie, bis er genau das zurückgibt, was ich will.

  4. Kopieren Sie den funktionierenden Ausdruck dorthin, wo er hingehört — Postman-Test, AWS Step Function, Kubernetes-Selektor.

  5. Wenn ich etwas Komplexeres baue (Transformation, Aggregation), wechsle ich zu jq.

Dieser Workflow schneidet Stunden des "Warum trifft mein JSONPath nicht zu"-Debuggings aus Integrationen heraus. Der Tester ist der fehlende Schritt, den die meisten Tutorials überspringen — sie zeigen die Syntax und nehmen an, dass Sie sie beim ersten Versuch korrekt schreiben können. Das können Sie meist nicht, besonders bei Filtern.

Tool-Empfehlungen für den breiteren JSON-Workflow

JSONPath ist ein Werkzeug in einem JSON-Workflow. Es mit verwandten Utilities zu kombinieren, macht die ganze Pipeline reibungsloser:

  • JSON Formatter — pretty-print bevor Sie abfragen; minifiziertes JSON ist unleserlich
  • JSON Diff — wenn JSONPath zwischen zwei Antworten unterschiedliche Ergebnisse zurückgibt, vergleichen Sie sie, um zu sehen, was sich geändert hat
  • JSON to TypeScript — generieren Sie TypeScript-Typen aus einem Sample, dann verwenden Sie den Typ, um JSONPath zu schreiben, der dem Schema entspricht
  • JSON Schema Generator — produzieren Sie ein JSON Schema zur Validierung; komplementär zu JSONPath, das für Abfragen ist

Der JSONPath Tester ist kostenlos, läuft nur im Browser und sendet Ihr JSON nirgendwohin. Einfügen, abfragen, iterieren, kopieren. Das ist der Loop.

Abschließende Anmerkungen

JSONPath ist nicht glamourös. Es ist nicht die Sprache, deren Erlernen jemand aufregend findet. Aber eine Stunde investieren, um fließend zu werden, zahlt sich über Jahre von API-Debugging, Cloud-Workflow-Konfiguration und Datenexploration aus. Die Syntax ist klein genug, um die häufigen Muster zu memorieren. Die Stolpersteine sind vorhersagbar genug, um sie zu verinnerlichen.

Wenn Sie neu darin sind: Beginnen Sie mit den grundlegenden Mustern ($.field, $..field, $.array[*], [?(@.field == 'value')]) und vermeiden Sie Filterkomplexität, bis Sie das Einfache eine Weile verwendet haben. Die meisten realen Abfragen sind einfach. Die Komplexität kommt von Edge Cases, die meist besser mit Code gelöst werden.

Häufig gestellte Fragen

D

Über den Autor

Daniel Park

Senior frontend engineer based in Seoul. Seven years of experience building web applications at Korean SaaS companies, with a focus on developer tooling, web performance, and privacy-first architecture. Open-source contributor to the JavaScript ecosystem and founder of ToolPal.

Mehr erfahren

Artikel teilen

XLinkedIn

Verwandte Beiträge