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?

javascriptjsonangularjs

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

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.

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

Ways to identify the moment jQuery datatable is initialized and populated with information

I am currently using the most recent version of jQuery datatables. I'm curious if there is a callback function available that triggers right after the data has been loaded and displayed in the table? While experimenting with a datatable in IE8, I hav ...

javascriptjqueryjquery-pluginsinternet-explorer-8

Building a single page web application using TypeScript and webpack - a step-by-step guide

For a while now, I've been working on single page applications using Angular. However, I'm interested in creating a single page application without utilizing the entire framework. My goal is to have just one .html file and one javascript file, w ...

javascriptnode.jstypescriptnpmwebpack

What is the method for modifying the chosen color using a select option tag instead of a list?

element, I have a Vue component that features images which change color upon clicking a list item associated with that color. <div class="product__machine-info__colors"> <ul> <li v-for="(color, index) in machine.content[0] ...

javascripthtmlvue.jsinterpolation

Error message "Exceeded the maximum call stack size" encountered during Vue-router authentication

I am currently in the process of developing a dashboard using Vue, Vuex, and Quasar. However, I have encountered an authentication error that is preventing me from progressing. Additionally, I need assistance in ensuring that when a user is already logged ...

javascriptvue.jsauthenticationvuejs2vuex

There was an unexpected error: Unable to access the 'bool' property of an undefined object

{ "name": "unique-react", "version": "2.0.1", "private": true, "scripts": { "start": "webpack-dev-server --hot --port 3002 --open --inline", "build": "cross-env NODE_ENV=production rimraf dist && webpack", "package": "webpack -p ...

javascriptreactjsnpmundefinedreact-proptypes

Placing an eye icon on the password input field for optimal visibility and positioning

I am currently working on a Node.js project and I am attempting to incorporate an eye icon using Bootstrap into the password input field for visibility. Below is the code snippet of my input field: <div class="container"> <form ...

javascripthtmlcssbootstrap-4

How to use a filtering select dropdown in React to easily sort and search options?

Recently, I started learning React and created a basic app that utilizes a countries API. The app is able to show all the countries and has a search input for filtering. Now, I want to enhance it by adding a select dropdown menu to filter countries by reg ...

javascriptreactjsreact-hooks

Leverage the powerful JSON functions in Laravel with PostgreSQL for enhanced functionality

When working with JSON data in PostgreSQL, you have access to various functions and operations. According to the PostgreSQL documentation, you can store JSON data in a column and retrieve JSON array elements using the -> operator. While this functionali ...

phpjsonpostgresqllaraveleloquent

What is the best way to incorporate this json feed into a database format?

Working on developing an app where I am integrating various stores for customers to purchase products. I have a json feed containing all the necessary data about these stores. Many fields like phone number, address, and postcode are straightforward to inc ...

phpjsondatabaseschemaerd

Different ways to adjust the positioning of the HTML canvas created using p5.js

I am attempting to integrate the output canvas from p5.js into my webpage by following a tutorial heretutorial. I am hoping that the canvas will appear where I have positioned it within the HTML body. However, no matter what I try with CSS properties like ...

javascripthtmlcssp5.js

Unable to Pass POST Parameters Through Volley Request

I am facing an issue with the code implemented on my Android client: int method = Request.Method.POST; JSONObject params = new JSONObject(); try { params.put("data", userJson); } catch (JSONException e) { LogSystem.e(tag, ...

androidjsonpostandroid-volley

Encountering difficulties reaching $refs within component method

Trying to access a ref defined within a template when an element is clicked. Here's the HTML: <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protectio ...

javascripthtmlvue.jsvuejs2axios

Utilizing Jquery for Enhanced HTML5 Validation

I need to ensure compatibility with browsers that do not support HTML5 validation. My goal is to display the basic error message from the browser using HTML5, while also adding a CSS class of "error" to each input, label, and parent div for fields with err ...

javascriptjqueryhtml

Configuring ng-options with personalized indices

I am a beginner learning AngularJS and I'm working on setting up ng-options with unique indexes. In my tables, I want to use the Primary Key as the index. For example, if the Primary Keys are 1, 3, 4, 5, I only want those indexes in my select. First ...

htmlangularjsselectng-options

Tooltip Bootstrap timing

I am currently working on creating a navigation bar with icon-only buttons that display tooltips when touched or tapped. Here is the code I have implemented: $('a[rel="tooltip"]').tooltip({ animated: 'fade', placement: ' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Rails successfully processed the request with a 200 OK status code, however, the $.ajax() function is triggering the 'error' callback instead of the 'success' callback

In my controller, the ajax request is handled as shown below (simplified): def create ... @answer = Answer.new(video: video_file) if @answer.save render json: @answer.video.url else ... end end This is how I have defined my ajax function: $.aja ...

javascriptjqueryruby-on-railsajax

Converting strings to JSON using Node.js

The backend (using Node.js) sends me a string in this specific format: t0=16,21,32,8$t1=15,33,46,4$t2=26,27,37,5$t3=9,29,40,8 My goal is to transform this string into a JSON object with the following structure: {"bets":[ {"n1":16, "n2":21, "n3":32," ...

jsonstringnode.jsalgorithm

There seems to be an issue with the AngularJS ng-click function not functioning properly

I'm attempting to insert a link tag with a filter into an HTML content. The HTML content is bound using ng-bind-html and the link tag includes an ng-click directive. However, I'm facing an issue where the ng-click function is not functioning. He ...

htmlangularjsangularjs-ng-clickng-bind-html

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

javascripthtmlcssvue.js

Using jQuery to validate the existence of a link

Within my pagination div, I have links to the previous page and next page. The link to the previous page is structured as follows: <span id="previous"><a href="www.site.com/page/1" >Previous</a>. However, on the first page, there will be ...

javascriptjqueryhtmlcss