How can I loop through JSON in AngularJS to populate fields without knowing the key value?

Question

How can I loop through JSON in AngularJS to populate fields without knowing the key value?

Here is the data structure that I'm working with:

{
"0": {
"keyword": "flower",
"short_desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"pt_value": "5"
},
"1": {
"keyword": "tree",
"short_desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"pt_value": "8"
},
"2": {
"keyword": "shrub",
"short_desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"pt_value": "3"
},
"3": {
"keyword": "grass",
"short_desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"pt_value": "7"
},
"4": {
"keyword": "bush",
"short_desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"pt_value": "6"
},
"5": {
"keyword": "plant",
"short_desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"pt_value": "9"
}
}

I want to use ng-repeat in the following way:

<div ng-controller="myController">
    <div ng-repeat="item in items">
        <p>{{ description }}</p>
        <p>{{ value }}</p>
    </div>
</div>

While I know I can do something basic like ng-repeat="product as products," how do I go about iterating through this complex data structure, repeating it, and positioning the content where I need it?

javascript json angularjs angularjs-ng-repeat

Answer 1

Answer №1

If you're looking to understand how ng-repeat expressions work, consider checking out the documentation on ng-repeat syntax. It's possible to handle repetition using an object.

Let's assume that scope.items represents the object mentioned in the question:

<div ng-controller="myController">
    <div ng-repeat="(k, item) in items">
        <p>{{ item.short_desc}}</p>
        <p>{{ item.pt_value}}</p>
    </div>
</div>

(key, value) in expression – key and value are customizable identifiers, and expression is the collection provided by the scope to iterate through.

Answer 2

If you're looking to understand how ng-repeat expressions work, consider checking out the documentation on ng-repeat syntax. It's possible to handle repetition using an object.

Let's assume that scope.items represents the object mentioned in the question:

<div ng-controller="myController">
    <div ng-repeat="(k, item) in items">
        <p>{{ item.short_desc}}</p>
        <p>{{ item.pt_value}}</p>
    </div>
</div>

(key, value) in expression – key and value are customizable identifiers, and expression is the collection provided by the scope to iterate through.

How can I loop through JSON in AngularJS to populate fields without knowing the key value?

Answer №1

Similar questions

Guide to exporting several Chart.JS graphs to a PDF document with each graph on a separate page

Incorporating an offset with the I18nPluralPipe

How come the pop-up isn't displaying in the middle of the screen?

Ways to resolve the issue of data not displaying on the page, even though it appears in the

Unusual actions from the jQuery Steps extension

Which is the optimal approach for utilizing REST API and parsing data on Android - Jackson or Groovy?

Stop capturing mouse and keyboard events within a specific div element on all web browsers

Searching for $or command in express.js

Attempting to grasp the process of converting CSV files into JSON format using Python

Retrieving data with jSON through the local storage API

Tallying the number of keys within the JSON

No location matched any routes

Angular allows for the addition of unique styles to a JSON

Choosing a single random key-value pair from a specific attribute within a JSON schema

Transferring user-selected values from JavaScript to a PHP file

Changes to the parent state will not be reflected in the child props

Chrome PWA debugger fails to respond when attempting to use the "add to homescreen" button

Does AngularJS really allow for seamless event communication between modules?

Tips for managing and loading data into a dataGrid or table with the help of ReactJS and ReactHooks

Generate a new perspective by incorporating two distinct arrays