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?

javascriptjsonangularjsangularjs-ng-repeat

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.

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

Creating a personalized confirmation function using JavaScript

Here is a function I've created to generate a confirmation box. The issue I'm facing is that the function doesn't wait for the user to click before returning true/false based on the onclick events. So, how can I solve this? function Confi ...

javascriptweb-applicationsfrontendweb-frontendconfirm

Using JavaScript to create a JSON object within a table

Currently, I am facing a challenge in creating a JSON object from an HTML table using JavaScript. While I can successfully retrieve the values of each cell in JavaScript, the issue lies in organizing and retrieving them as per my requirements. Here is the ...

javascriptjson

The first item in Swiper is incorrectly displayed after the initial cycle, even though the data is accurate

Currently, I am incorporating the slider functionality in Vue using the Swiper framework. Although everything seems to be functioning properly, there is a minor issue that arises when filtering the data and completing the first cycle after scrolling. The f ...

javascriptvue.jsswiper.js

`Only firing event listener once`

I have created a JS module where I am adding a click event to all links that match a specific selector. Here is an example of how it's done: var Lightbox = (function () { var showLightbox = function () { // this does stuff }; var init = fu ...

javascriptdom-events

Automatically populate select2 dropdown in ASP.NET MVC Core using AJAX

Currently, I am working on a feature to automatically populate text boxes and drop-down fields in my view. To achieve this, I am using a list that I query again. I came across an example that I am referencing here. However, when trying to debug, the break ...

javascriptajaxasp.net-core-mvcjquery-select2

developed a regular expression to disregard .goutputstream documents

After successfully creating a watcher with chokidar, I encountered an issue when trying to ignore certain files using regex. I am struggling to figure out what went wrong in my code or regex implementation. Below is the snippet of the code: const watcher ...

javascriptnode.jsregex

Guide to opening all href links in a new window

When loading HTML content parsed from an email to a frame, the issue arises when there is an href link that tries to open in the same frame. I want to modify it so that it opens in a new tab instead. Usually, setting the target to _blank in the href would ...

javascripthtmlemailasp-classicframe

Removing the gap between the clicked point and the draw point in Html5 canvas

To better understand my issue, please refer to the image linked below: In the image, you can see that when I scroll down and click on the canvas to point a position, it creates space between the clicked point and where the line is drawn. Below is the cod ...

javascriptjqueryhtmlcanvas

When using Google Maps Autocomplete, always make sure to input the full state name instead of just the state

Utilizing the Google Maps autocomplete API, we have enabled our customers to search for locations in the format of city, state, country. The functionality is effective overall, but a recurring issue arises when searching for cities, such as 'Toronto&a ...

javascriptjquerygoogle-mapsautocompletegoogle-geolocation

React is displaying [object Object] instead of the intended value on the webpage. What steps can be taken to resolve this issue?

I have attempted to retrieve data from an API and am currently working on displaying this data within a table cell inside a component. Instead of rendering the original data, React is displaying [object Object]. I tried using the join() method with commas ...

javascriptreactjsmaterial-ui

What could be causing my JavaScript loop to only display the final value?

Story Behind the Game In my latest project, I am delving into the world of creating a captivating 2D side-scrolling game using HTML and JavaScript. To ensure smooth gameplay, I have opted to incorporate ES6 for efficient management of all game objects. C ...

javascriptarraysloops

Queue with promises

My challenge is to process an array of files, in batches of N. I have a function called doWork that returns promises. var files = [] var doWork = function(file) { return asyncFn(file) } I want the ability to dynamically add items to this queue. Updat ...

javascriptnode.jspromise

Retrieve checkbox selected value using pug and node.js

How can I retrieve the value of a checked checkbox in order to redirect to (href="/player/edit/:id") or (href="/player/delete/: id"), and obtain the player id for editing or deleting? I have omitted other code details such as app.js which includes the ser ...

javascriptmysqlnode.jscheckboxpug

Tips for using jQuery to slowly change a CSS property to "auto"

I've encountered a situation where I have an element styled with position:fixed, and bottom: auto;. When I apply the command .animate({bottom : '10%'});, it smoothly slides to the specified position. However, when I try to set it back to its ...

javascriptjqueryhtmlcssjquery-ui

Troubleshooting: Issue with JQuery click functionality within Django's AJAX implementation

I've been tackling the Tango with Django exercises to get a better grip on Django. I'm almost finished, but I'm hitting a snag with the Ajax segment. The Ajax function for auto-adding a page isn't triggering. I can't seem to figur ...

javascriptjquerypythonajaxdjango

Simple methods for ensuring a minimum time interval between observable emittance

My RxJS observable is set to emit values at random intervals ranging from 0 to 1000ms. Is there a way to confirm that there is always a minimum gap of 200ms between each emission without skipping or dropping any values, while ensuring they are emitted in ...

javascripttypescriptrxjs

Incorporating images with JavaScript in Jade templates

Currently I have a layout.jade code that I am looking to modify the javascript for. My goal is to load an image onto the page every time it is reloaded using jade. Here is the existing code: html head title= title script(src='/libs/jquery/j ...

javascriptexpresspug

Exploring the combination of Babel and Next.js: Integrating custom scripts into a project

Hello, I am currently learning next.js and facing a common issue that I need help with. I have created my own ES6 JavaScript library and now I want to convert it to babel so I can use it in my next.js application. Is there a way to configure babel for sp ...

javascriptnode.jsreactjsbabeljsnext.js

Is there a way to display the "back button" on a subview?

As a newcomer to Ionic, I am finding navigation to be the most challenging aspect. My app has two tabs - "Dashboard" and "Friends". When I click on the Dashboard tab, I want it to navigate to a subview called "subview_dash", without displaying the tabs in ...

javascriptangularjsionic-framework

Difficulty with info window within a for loop

I am currently working on implementing multiple info windows for markers. I found an example on Stack Overflow that I am trying to follow. Despite not encountering any errors in the console, the info windows do not appear as expected when clicking on the m ...

javascriptjquerygoogle-mapsinfowindow