Loop through a complex JSON object in Angular using ng-repeat

When working with a specific controller, I receive a JSON object that is quite intricate:

{
"184": {
    "title": "THE STONE ROSES",
    "sessions": {
        "1443564000000": {
            "num": 5
        },
        "1442959200000": {
            "num": 1
        },
        "1447196400000": {
            "num": 1
        },
        "1444428000000": {
            "num": 2
        },
        "1446332400000": {
            "num": 3
        }
    }
}

}

I attempted to iterate over this object in my view using the following approach:

<div class="large-6 columns" ng-repeat="item in showItems" st-raw>
    <h1>{{item.sessions}}</h1>
 </div> 

However, when I implement this code, only a portion of the object is displayed on the HTML response:

{"1443564000000":{"num":1}}

The 'sessions' attribute within the object is quite complex (using session IDs to store numbers).

Some individuals have utilized ng-repeat-start for handling similar scenarios, but implementing it in my case has resulted in several errors.

Answer №1

If you need to loop through the sessions property, which is not an array but an object, you will have to iterate over the properties of the object:

<tr ng-repeat="(key, value) in data">

For a practical example, check out: http://plnkr.co/edit/7AQF6k7hf2aZbWFmhVoX?p=preview

This code snippet was inspired by discussions on Stack Overflow about iterating over keys and values in Angular with ng-repeat. Check it out here: How can I iterate over the keys, value in ng-repeat in angular

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

I'm looking to utilize the Blueimp File Uploader to upload just one file

I'm trying to upload only one file using Blueimp File Upload. However, whenever I select a second file after uploading the first one, the new file gets appended below the old one instead of replacing it. How can I modify the code to replace the existi ...

Ways to utilize the image string obtained from the .getExtra method

I have successfully created a listview in my app and parsed JSON data into it, including images and text. Now I am facing an issue where I need to pass the image to another activity when the user clicks on it. I can easily pass text data using putExtra, bu ...

Tips for utilizing Angular components alongside ui-router

I am attempting to utilize components (as opposed to controllers and templates) in ui-router. However, I am encountering issues with this approach. I am following the instructions provided in this article on their website. You can also view my code on ...

Creating Buttons with Multiple Functions

Hey there, I've been working on some code... It's functional, but it's not quite meeting my expectations. $('.yesOrNo').on('click', function() { var $yes = $("#yes").on('click'); var $no = $("#no").on(&a ...

What is the return value of the .pipe() method in gulp?

When using the code snippet below, what will be the input to and output of .pipe(gulpIf('*.css', cssnano()))? gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js&apo ...

"Implementing a self-invoking function in JavaScript and effectively clearing the interval within it

I am looking to stop the animation interval in this particular example $.fn.bounce = function(options) { var settings = $.extend({ speed: 10 }, options); return $(this).each(function() { var $this = $(this), $pa ...

The improper utilization or replacement of Jest mock in an Angular standalone component's unit test is causing issues

Presented here is a streamlined Ionic/Angular component with unnecessary code removed. import { IonicModule, ModalController } from '@ionic/angular'; @Component({ selector: 'my-component', templateUrl: 'my-component.html' ...

JavaScript - Insert rows within the tbody element by adding them after the opening tbody tag. The new rows should be

Having trouble adding rows in JavaScript. The code is functioning correctly, but the new rows are appearing after the tbody tag instead of inside it. Here's a snippet of the code: function deleteRow(row) { var i = row.parentNode.parentNode.rowIn ...

Best practices for persisting nested properties in mongodb using mongoose

Suppose I am looking to create a user schema with nested properties: var userSchema = new mongoose.Schema({ username: { type: String, unique: true, lowercase: true }, /* ... additional properties ... */ profile: { firstName: { type: String, d ...

Arranging routes in node.js like a pro

const express = require('express'); const router = express.Router(); router.use(function(req, res, next){ console.log(req.user) if(!req.user){ res.redirect('/login'); }else{ res.locals.username = req.user.us ...

The Function(JS) is specifically designed to only function within the topmost div or quote

Currently, I am facing an issue with a function I have implemented. This function adds a blur effect to words in a Blockquote when the page is loaded. However, I need this function to work for all Blockquotes and different divs on the page, not just the to ...

When evaluating code with eval, properties of undefined cannot be set, but the process works seamlessly without

Currently, I am attempting to utilize the eval() function to dynamically update a variable that must be accessed by path in the format myArray[0][0[1][0].... Strangely enough, when I try this approach, I encounter the following error: Uncaught TypeError: ...

Switch to display only when selected

When I click on the details link, it will show all information. However, what I actually want is for it to toggle only the specific detail that I clicked on. Check out this example fiddle Here is the JavaScript code: $('.listt ul').hide(); $( ...

Issue with Angular JS: ng-repeat not displaying content when used inside a table element

Here is a code snippet that currently shows only the thead section on my webpage: <table> <thead> <tr id="table-heading"> <th>Team</th> <th>Played</th> <th>Won ...

Unable to retrieve data from the array

I am encountering an issue while trying to fetch data from an array, as I keep receiving undefined Please refer to the image for a visual representation of my problem. I'm not sure what I might be overlooking, so any help would be greatly appreciate ...

Can we avoid the error callback of an AJAX request from being triggered once we have aborted the request?

Initially, I encountered a challenge where I needed to find a way to halt an AJAX request automatically if the user decided to navigate away from the page during the request. After some research, I came across this helpful solution on Stack Overflow which ...

Adjust the badge's color based on the status retrieved from the jQuery AJAX call

I've been working on retrieving data from an endpoint through a get request, and I'm looking to adjust the color of the request status based on the response. $.ajax({ type: 'GET', url: 'api/v1/service/tax', succe ...

trapping errors in AngularJS

Recently, I was looking into an angular-fullstack application and stumbled upon the following code snippet: catch( function(err) { err = err.data; $scope.errors = {}; // Update form field validity based on mongoose errors angular. ...

Error: No package.json file found after publishing npm package with ENOLOCAL

Ecosystem using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="335d435e73051d021d03">[email protected]</a> using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a8a9a2a386b0fee8f7f7e ...

Tips on uploading files to dropzone and sending them via an ajax request as though they were regular input file fields

I am looking to send files via formData in an ajax request and have the server interpret it as if it were coming from an input file field. I attempted a solution I found here: Add files from Dropzone to form However, when I make the request, the server d ...