When working with AngularJS, using ng-repeat to loop through elements may encounter difficulties if the key contains a colon ":"

Question

When working with AngularJS, using ng-repeat to loop through elements may encounter difficulties if the key contains a colon ":"

I am facing an issue while trying to loop through a simple JSON in AngularJS using ng-repeat. The specific JSON I am working with is as follows:

$scope.lines = { 
        data: [
                { "properties": {
                    "name": "My test",
                    "test:testOne": "This is test one" }
                }
        ]
    };

The main problem lies with this property: test:testOne. Parsing this property is proving to be challenging due to the presence of a colon. I have created a jsfiddle here: http://jsfiddle.net/7MhLd/1250/ where I have attempted various methods, unfortunately, without success

javascript json angularjs angularjs-ng-repeat

Answer 1

Answer №1

Utilizing [] for bracket notation is a common practice in JavaScript programming. Here's an example:

<div ng-controller="MyCtrl">
    <div ng-repeat="line in lines.data">
       {{ line.properties['test:testOne'] }}
       {{ line.properties.name }}
    </div>
</div>

View Example

Answer 2

Utilizing [] for bracket notation is a common practice in JavaScript programming. Here's an example:

<div ng-controller="MyCtrl">
    <div ng-repeat="line in lines.data">
       {{ line.properties['test:testOne'] }}
       {{ line.properties.name }}
    </div>
</div>

View Example

When working with AngularJS, using ng-repeat to loop through elements may encounter difficulties if the key contains a colon ":"

Answer №1

Similar questions

Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

Creating a personalized audio player using HTML

Tips on choosing filters and leveraging the chosen value for searching in a Vue application

How can Javascript or Jquery determine the specific event assigned to an object?

CSS Only Sidebar Dropdown (without using Bootstrap)

What is the best way to merge two tables together using the server-side JQuery Datatable plugin?

Rotating a loaded file using THREE.js

Top method for enhancing outside libraries in AngularJs

Shortening Strings When Parsing Json and Storing in ADO

Easy Ways to Retrieve the Current Date and Time

Getting data from a document containing key value pairs

Access Denied while attempting to use Firebase

Configuring Webpack for a React application with Express and Babel

"Sending the selected pass selector as a parameter to the dispatched action is causing a typing

An unforeseen issue arose while trying to update the data in a Chart.js chart within a Vue application

Access your Vue.js application using Google Sign-In (GIS)

Transformation of characters with diacritics in DataWeave output

Incorporating dynamic images from local sources into a listview in a React Native

Choosing a class using Jquery through a For loop in Javascript

AngularJS Automatic Color Conversion from HSL to RGB