looping through a linked data object with ng-repeat

I am working with a Node object in my Angular controller. Each Node contains a next property which points to the next item:

$scope.Stack = function () {
        this.top = null;
        this.rear = null;
        this.size = 0;
        this.max_size = 15;
    };


    $scope.Node = function (data) {
        this.data = data;
        this.next = null;
        this.previous = null;
    };

    $scope.Stack.prototype.pushUp = function (data) {
        for (i = 0; i < data.items.length; i++) {
            if (data.items[i]) {

                var node = new $scope.Node(data.items[i]);
                if (node) {
                    node.previous = this.top;

                    if (this.top) {
                        this.top.next = node;
                    }

                    this.top = node;

                    // if first push, then set the rear
                    if (this.size == 0) {
                        this.rear = node;
                    }

                    this.size += 1;
                }
            }
        }

    };

Initializing an object:

$scope.Timeline = new $scope.Stack();

My query: Can ng-repeat/Angular be used to iterate over linked data structures like this?

Answer №1

The AngularJS documentation states that when using ngRepeat, the variable in expression refers to the user-defined loop variable and expression is a scope expression that provides the collection to iterate over.

It is important to note that ngRepeat can only iterate over Javascript "Collections" such as Arrays, Maps, Sets, and WeakMaps. Therefore, it is not possible to iterate over a linked structure using ngRepeat.

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

Using JQuery to cycle a class with a timer

My list has the following structure <div id="slider"> <ul> <li class='active'> a </li> <li> b </li> <li> c </li> <li> d </li> <li> e </li> </u ...

Creating a unique navigation route in React

My application has a consistent layout for all routes except one, which will be completely different from the rest. The entire application will include a menu, body, footer, etc. However, the one-off route should be standalone without these elements. How ...

Acquiring the markers, however the latitude and longitude are both null - vue.js

I have been working on displaying markers on a map. When I fetched the data, everything seemed fine in Vue DevTools. The `this.markers` property also contains the data. However, to my surprise, the values for `lat` and `lng` inside the markers are showing ...

Sending Angular an error message from Express

In my application, users have the ability to add movies to their watchlist. I am working on preventing users from adding a movie that already exists in their watchlist. This is the addMovie function in my Angular controller: $scope.addMovie = function (m ...

Having trouble with Angular redirecting to the home page?

Having a bit of trouble: core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Unable to match routes. URL Segment: 'home' This is the code snippet from view.html: <div class="container"> This serves as the main app; <a rou ...

Unexpected behavior involving the onchange event, input validation, and the enter key

One challenge I encountered was implementing validation for a date input field in a form. The requirement was to only allow dates starting from today up to a maximum of 3 years in the future. If a valid date is entered, a modal should appear; otherwise, an ...

Combining Jquery with Append to Dynamically Update PHP Variables

Code Snippet (index.html) <script> $(document).ready(function() { var interval = setInterval(function() { $.get("load_txt.php", { 'var1': 4, 'var2' : 52}, function(data){ $('#msg' ...

best way to display an array in HTML

When I input a manufacturer, I want to display the complete data from each object inside the array in the HTML. However, when I call the function on the HTML page, all I get back is the word object repeated as many times as the Manufacturer is defined in ...

drawing tool with JavaScript and HTML5

Can you help me figure out why my sketchpad isn't working in Processing.js? I've checked my code and there are no errors, but the canvas is not showing up. Any suggestions? Take a look at the code below: function createSketchPad(processing) { ...

When Vue is clicked, it appears to trigger multiple methods simultaneously

Currently, I am learning Vue and encountered a problem that I need help with. When using the v-on:click directive to call a method, all other instance methods are also called when the same method is used elsewhere. HTML: <div id="exercise"> &l ...

Using Javascript, delete all chosen HTML elements containing innerText

Looking to extract certain HTML tags from a block of code in TextArea1 and display the modified output in TextArea2 upon clicking a button. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8&quo ...

What is the process for transforming JSON into a different format?

Currently, I have a JSON array structured as follows: var data = { report: [ { Name: "Nitin", comment: [ { count: 0, mName: "Feb" }, ...

Tips for successfully passing multiple variables to the onload function within an Angular ng-include

I am facing a challenge in my Angular application where I need to pass two variables to a template. Here is what I have been trying: <div ng-include="'myTemplate.html'" onload="{obj: someObject, value: value}"></div> Unfortunately, ...

Error: Unforeseen token encountered while attempting to import React in Javascript

Upon executing the command 'npm run start', I encountered this error: import React from 'react'; ^^^^^ SyntaxError: Unexpected identifier at Module._compile (internal/modules/cjs/loader.js:721:23) at Object.Module._exten ...

Access the value of a variable from a window resizing event and utilize it in a different

I have a carousel that I'm working with and am trying to figure out how to announce the number of currently visible slides when the "next" button is clicked. While I can see that on resize, the correct number of slides is being logged, I am strugglin ...

How can I add page transitions to my simple HTML website?

Working on an internal website project for my office using vue.js has been a rewarding experience. I appreciate how easily it allows me to manage multiple pages with dynamic content and seamless transitions. Unfortunately, my IT department is hesitating to ...

What are the steps for setting up API REST calls proxy for a frontend hosted on Netlify?

While testing locally, I am able to successfully post a call and access it through Netlify. However, once I host the frontend app on Netlify, the POST Proxy is being set to the Netlify URL. The hosted URL: Upon clicking "Sign Up" and then clicking on "Si ...

Preparing the data before displaying it

I have a data display in the view that needs to be formatted first. Previously, I used val.toFixed(2) which worked fine for numbers, but when letters were included with the numbers, the formatting didn't account for them and only displayed the numbers ...

Angularfire social sign in with Facebook friends connections

When utilizing Facebook authentication with angularFire, I have encountered an issue where the "user_friends" object is not present in the Auth object that gets returned. Upon inspecting the code, it seems the ng-click directive used is as follows: "auth. ...

Iterate through the xml.documentElement in a loop

I want to show 8 men and 2 women in SVG format. However, my current function only displays one man and woman. How can I add a loop to make this work for all individuals? for (i = 0; i < Serie[n].Number; i++) { return xml.documentElement } The data arr ...