JSONPath encounters an issue when square brackets are embedded within a string

I am encountering issues with the JSONPath library found at https://github.com/JSONPath-Plus/JSONPath in its latest version.

For example:

{
    "firstName": "John",
    "lastName": "doe",
    "age": 26,
    "address": {
        "streetAddress": "naist street",
        "city": "Nara",
        "postalCode": "630-0192"
    },
    "phoneNumbers [1]": [
        {
            "type": "iPhone",
            "number": "0123-4567-8888"
        },
        {
            "type": "home",
            "number": "0123-4567-8910"
        }
    ]
}

I am attempting to retrieve "phoneNumbers [1]" using the following path: $..['phoneNumbers [1]']

A Demo Page for testing purposes can be found here:

However, I have encountered an issue due to the square brackets within the string. Can anyone suggest a solution?

I frequently work with JSON objects containing strings with square brackets, so a general solution would be preferred over a specific fix.

Is there a way to escape characters in order to resolve this problem? The JSON object provided above serves as an illustrative example of the issue.

The problem persists even when using only JSONPath, indicating that it is not limited to a particular library or implementation.

Further information on JSONPath can be found at

jsontypescriptjsonpathjson-path-expressionjsonpath-plus

Answer №1

It seems like there might be an issue with JSONPath-Plus, but the jsonpath library is able to handle it.

const data = JSON.parse(`{
    "firstName": "John",
    "lastName": "doe",
    "age": 26,
    "address": {
        "streetAddress": "naist street",
        "city": "Nara",
        "postalCode": "630-0192"
    },
    "phoneNumbers [1]": [
        {
            "type": "iPhone",
            "number": "0123-4567-8888"
        },
        {
            "type": "home",
            "number": "0123-4567-8910"
        }
    ]
}`);
const result = jsonpath.query(data, "$..['phoneNumbers [1]']");
console.log(result);
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375d4458594756435f770619061906">[email protected]</a>/jsonpath.js"></script>

There's not much you can do about this beyond:

  • Changing your data structure
  • Changing your library
  • Filing a bug report

Answer №2

If you need a solution, consider utilizing the capabilities of jsonpath-plus

$[?(@property == "phoneNumbers [1]")]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to prevent the hassle of manually reloading a VS Code extension each time I make updates

While working on my VS Code extension, I keep encountering the issue of opening a new instance of VS Code every time I run the extension to view recent changes. This becomes especially tedious when using VS Code remote and having to enter my password twice ...

typescriptvscode-extensionsvscode-remotef5

Ways to add a React Router Link to a Material UI TableRow

When attempting to incorporate a Link component from React Router Dom into my Material UI TableRow, I encountered an issue. <TableRow component={Link as any} to={`/company/${company.id}`} className="clt-row" key={company.id}> The error message I re ...

reactjstypescriptmaterial-uireact-router-dom

The struggle of implementing useReducer and Context in TypeScript: A type error saga

Currently attempting to implement Auth using useReducer and Context in a React application, but encountering a type error with the following code snippet: <UserDispatchContext.Provider value={dispatch}> The error message reads as follows: Type &apos ...

reactjstypescriptnext.js

Guide on creating a darkening effect for lights

Seeking assistance on how to create a light-off effect when clicking on any of my textboxes. I discovered this concept on the following website: What I aim to achieve is that upon clicking a specific textbox, it will be highlighted. Upon clicking the sam ...

javascriptjqueryhtmlcssjson

Unreliable TypeScript errors when using spread arguments

Consider this function: function foo(a: number, b: number) {/* ... */} Error is triggered by Snippet 1: foo(1, ...[]); Expected 2 arguments, but received only 1. Error is triggered by Snippet 2: foo(1, 2, ...[]); Expected 2 arguments, but rece ...

typescriptargumentsspread-syntax

Instructions for setting a default value for ng-options when dealing with nested JSON data in AngularJS

I need help setting a default value for my ng-options using ng-init and ng-model with dependent dropdowns. Here is an example of my code: <select id="country" ng-model="statessource" ng-disabled="!type2" ng-options="country for (country, states) in c ...

javascriptangularjsjsonnestedangularjs-ng-options

Efficiently Parsing FormData in React with TypeScript for Improved Data Formatting

Recently, I've started working with React and Typescript and one of the challenges I'm facing is managing an editable table with default values that can be updated and submitted. The data format for the parameters is crucial as the fields and va ...

reactjstypescriptformsreact-typescriptreact-tsx

Encountering an issue while running the ng build --prod command in Angular

I ran into an issue while trying to execute the command ng build --prod in Angular. I've completed my small project and now need to generate the necessary files for uploading to my hosting provider. ERROR - ANGULAR CLI C:\Users\Johan Cor ...

angulartypescriptangular-cliangular6production

How can you utilize Angular Signals in combination with HostBinding to dynamically update styles?

Within a component called app-test, the following code is present: @Input({ transform: booleanAttribute }) reverse: boolean = false; @HostBinding('style.flex-direction') direction: string = this.reverse ? 'column-reverse' : &ap ...

javascriptangulartypescriptangular-signals

Utilize external functions in evaluated code

After working with a TypeScript file containing the following code: import { functionTest } from './function_test' function runnerFunctionTest() { console.log("Test"); } export class Runner { run(source : string) { eva ...

javascripttypescriptimportevaljavascript-import

Is there a way to remove a specific section from a JSON object when a particular pattern is detected

When using an API to fetch football data, I have observed that the data becomes corrupted when a specific pattern appears. An example of the correct data format is shown below: { "id": 150, "name": "bwin", " ...

jsonapisedjq

React 16 exhibiting unexpected behavior with class names

I am trying to implement the classnames object into my input field within a react 16 project, completely independent of the webpack tool. const fieldClassName = classnames( formControlStyles.field, 'form-control' ) The 'form-control& ...

reactjstypescriptwebpackclassname

issue with mongoose virtual populate (unable to retrieve populated field)

During my project using mongoose with typescript, I encountered an issue with adding a virtual called subdomains to populate data from another collection. Although it worked without any errors, I found that I couldn't directly print the populated data ...

javascriptnode.jstypescriptexpressmongoose

Access file using operating system's pre-installed application

How can I open a file using the default application for that file type on different operating systems? For example, when opening an image.png on Mac, it should open with Preview, and on Windows with Windows Photo Viewer. I know you can use open image.png ...

javascriptnode.jstypescript

Encountering a 404 error when using the NestJS GET function within the service and controller

I am facing an issue with creating simple GET logic. When I test it in Postman, I keep receiving a 404 error. books.service.ts contains the following basic logic: constructor( @InjectRepository(Books) private readonly booksRepo: Repository<Boo ...

node.jstypescriptpostmannestjs

The initial row's Id will be used as the Id for all subsequent rows within a JSON object

After dragging a tr in a table and confirming by clicking a button, I need the order list to be updated in the database. To achieve this, I created a JSON object where I intend to save the ids and their corresponding new orders. The issue I am facing is t ...

javascriptjquerynode.jsjson

The functionality of CSS transitions may be affected when dynamically adding a class

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

cssreactjstypescriptcss-transitions

Enabling specific special characters for validation in Angular applications

How can we create a regex pattern that allows letters, numbers, and certain special characters (- and .) while disallowing others? #Code private _createModelForm(): FormGroup { return this.formBuilder.group({ propertyId: this.data.propertyId, ...

javascriptangularregextypescriptvalidation

What is the reason that (click) does not send my data within <button>, while (change) within <input> does in Angular and HTML?

I am facing an issue while trying to send data to my Glassfish RESTful server. The method is activated successfully when I use (change) inside the input tag, but it doesn't work when I try using (click) or (change) to activate the method. I attempted ...

htmlangulartypescripthttp

React: Issue with passing arguments to redux action hooks

In my React application, I have implemented Redux-Toolkit to manage reducers and actions with slices. I am currently working on creating actions that can update and delete values from the store, requiring arguments for their usage. To achieve this, I have ...

reactjstypescriptreduxredux-toolkit