Exploring JSON information containing colons in the labels

Question

Exploring JSON information containing colons in the labels

I am having trouble accessing JSON data in Angular that contains a colon in the label (refer to responsedata). This is the code causing issues:

<li ng-repeat="i in items.autnresponse.responsedata | searchFor:searchString"> <p>{{i.autn:numhits}}</p> </li>

Every time I try to run it, I encounter this error message:

Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 7 of the expression [i.autn:numhits] starting at [:numhits]

.

Snippet of JSON data:

"autnresponse": {
    "action": {
        "$": "QUERY"
    },
    "response": {
        "$": "SUCCESS"
    },
    "responsedata": {
        "autn:numhits": {
        "$": "92"
    },
    "autn:totalhits": {
        "$": "92"
    },
    "autn:totaldbdocs": {
        "$": "188"
    },
    "autn:totaldbsecs": {
        "$": "188"
    },

Does anyone have a solution for this issue?

javascript json angularjs

Answer 1

Answer №1

After reading the comments, I am confident that I have the answer to my question. Here is what I would say:

Assumption

It seems like your JSON is parsing correctly but your code is having trouble accessing something in the resulting data structure.

Answer

To access the desired element, use square bracket notation with a string:

var x = i['autn:numhits'];

You can also use the same approach if you have a property name stored in a variable, like this:

var propertyName = 'autn:numhits';
var x = i[propertyName];

Addendum

If you are working with Angular template, you can try this:

{{i['autn:numhits']}}

Answer 2

After reading the comments, I am confident that I have the answer to my question. Here is what I would say:

Assumption

It seems like your JSON is parsing correctly but your code is having trouble accessing something in the resulting data structure.

Answer

To access the desired element, use square bracket notation with a string:

var x = i['autn:numhits'];

You can also use the same approach if you have a property name stored in a variable, like this:

var propertyName = 'autn:numhits';
var x = i[propertyName];

Addendum

If you are working with Angular template, you can try this:

{{i['autn:numhits']}}

Answer 3

Answer №2

One way to retrieve the value is by using square brackets as if treating it like a dictionary instead of using dot notation. The code {{i.autn:numhits}} can be replaced with {{i['autn:numhits']}}

Just a reminder, if you plan to enclose autn:numhits in double quotation marks, you must escape them properly for HTML rendering.

Answer 4

One way to retrieve the value is by using square brackets as if treating it like a dictionary instead of using dot notation. The code {{i.autn:numhits}} can be replaced with {{i['autn:numhits']}}

Just a reminder, if you plan to enclose autn:numhits in double quotation marks, you must escape them properly for HTML rendering.

Exploring JSON information containing colons in the labels

Answer №1

Answer №2

Similar questions

Encountering a 404 error while accessing my meticulously crafted express server

Is it possible to obtain the index of a table row using querySelector?

React error: Updating state is only allowed on mounted or mounting components

Changing JSON format into a DataTable using C#

Neither of the peer models is present in the JSON file

Angular 2 Issue: Error Message "Cannot bind to 'ngModel'" arises after FormsModule is added to app.module

The validation process did not pass because of a manually inputted value

Using curly brackets as function parameters

How to detach functions in JavaScript while preserving their context?

How to ensure jQuery runs only once, even when the back button is pressed in the

A guide to testing a controller by simulating a service using jasmine

Can you explain the meaning of "|| [];"?

Javascript increasing the variable

Timing complications with AngularJS directives

Ensuring the accuracy of nested objects through class validator in combination with nestjs

issue with implementing the chart.js npm package

Transmitting JSON data to Slack through an HTTP POST submission

The issue with AngularJS multiple $http requests failing to fetch accurate data

Facing the issue of "Protractor not syncing with the page" while trying to navigate an Angular website

The function webpack.validateSchema does not exist