Looping through an object with AngularJS's ng-repeat

Upon receiving an object as the scope, which has the following structure: https://i.sstatic.net/hiBaw.png

The controller function is defined as follows:

    module.controller('ActiveController', ['$scope','$http',
      function($scope, $http) {
        $http({
              method: 'GET',
              url: 'http://localhost:8000/api/order/?format=json'
            }).then(function successCallback(response) {

                console.log("OK Respone");
                console.log(response.data);
                $scope.orders = response.data;
              }, function errorCallback(response) {

                console.log("NO Response");
        });
 }]);

When viewed in the browser console, the object appears like this:

https://i.sstatic.net/OR1AH.png

I am seeking assistance with looping through and displaying the entire object within the .html file. The current code that is not functioning as intended is as follows:

<div ng-controller="ActiveController">
<div ng-repeat="order in orders">
    <p>{{ order.id }}</p>
    <p>{{ order.created }}</p>     
</div>
</div>

I have omitted showing my "main" .html file for brevity.

Answer №1

Looks like the main issue lies within the controller logic. To fix this, attempt storing objects in the $scope.orders variable.

$scope.orders = response.data.objects;

Answer №2

To address this issue, make necessary adjustments in both the view and the controller:

For the View section:

<div ng-controller="ActiveController">
  <div ng-repeat="order in orders.objects"> <!-- take note of the orders.objects -->
    <p>{{ order.id }}</p>
    <p>{{ order.created }}</p>     
  </div>
</div>

For the Controller section:

$scope.orders = response.data.objects;

Agreeing with @ddepablo's recommendation. This adjustment should resolve the issue.

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

Different approaches to verifying a password match on the signup page with angularjs

I need help with writing code to check the confirm password using AngularJS. Can someone please assist me with this issue? Here is my signUp.html file: <html ng-app="UniqueApp"> <head> <link rel="stylesheet" href="../css/bootstrap.min.css" ...

Encountering difficulties resolving the dependency tree while trying to install @react-navigation/[email protected]

After creating a new project called MyProject using react-native init MyProject, I opened it in VSCode and the first task was to install navigation. Initially, when running npm install @react-navigation/native @react-navigation/stack, it threw an error. S ...

Why might the MIME type 'application/json' be refused when the dataType is JSON?

Is it true that if the dataType is set to JSON in jQuery, it expects a JSON response? I found http://api.jquery.com/jquery.ajax/ to be informative on this topic. In the following function, I have experimented with specifying both no dataType (for jQuery&a ...

What steps should I take to resolve the npm UNMET PEER DEPENDENCY notification?

I'm currently using Windows 10 with Node version 5.6.0 and npm version 3.6.0. My goal is to add angular-material and mdi to my project directory. When I run npm install angular-material mdi, I encounter the following errors: +-- <a href="/cdn-cgi/ ...

Retrieve data from an API and store it in a JSON array

My website is having an issue where it's fetching data from an API and displaying it in a table, but all the cells are returning undefined values. The data in the API is structured as an array with multiple datasets inside curly braces that I am unsu ...

site.js problem

Recently, I decided to create my very own CS:GO gambling website. After successfully setting it up on my localhost using VPS, I moved on to getting a domain and finalizing everything. However, when attempting to run site.js, an error message popped up: [e ...

The jQuery AJAX function successfully executes, but the MySQL post deletion operation fails to take place

I am encountering an issue with this particular code. The Ajax code runs through to the end and then fades out the parent of the delete button. Below is the code for the delete button, post, and Ajax: <?php include('php/connect.php'); ...

Encountering [object, Object] while attempting to display JSON object retrieved from req.body in the console

While attempting to insert a product's details into my API's PostgreSQL database using Postman, I encountered an issue where the values of the specs key were displayed as [object Object] instead of showing the complete data. As a result, even in ...

Unlocking numerical input solely by executing the specified command within the most up-to-date iteration of the Chrome Extension of Selenium IDE

After executing the command in Selenium IDE, I successfully extracted the sentence, "Your booking ID is 1234", and saved it in a variable named myText. <table> <tr> <th>Command</th> <th>Target</th> < ...

I need to know how to create a patch request in Vue.js and simultaneously modify the marks input for specific individuals by using v-model

Hello there, I am currently developing a student assessment input form using vuejs, express, and mongoDB. The backend API is complete and functioning properly when tested with postman. Here is the code: // UPDATE MARKS router.patch('/:studentId' ...

What is the best way to imitate a DOM in order to effectively test a Vue application with Jest that incorporates Xterm.js?

I've created a Vue component that displays an Xterm.js terminal. Terminal.vue <template> <div id="terminal"></div> </template> <script> import Vue from 'vue'; import { Terminal } from 'xterm/lib/public ...

The only React element that is rendered inside a for loop is the last one

I'm struggling with a function that is supposed to render an infinite number of strings as Comment components, but it only displays the last component. This is the function I'm working with: function displayComments(...comments) { for(let i ...

Utilizing the Google Translate API within an ASP MVC framework to translate a div's content from English to Arabic

Currently, I am working on a small project that involves two divs: one for English and another for Arabic. Despite creating the project, I am encountering an issue with getting the translation from English to Arabic. Below is the code I have attempted, but ...

How can I code in React to make one button change color while the others remain a different color, instead of all having the same color?

I developed a quiz application that changes the color of answer buttons based on user selection. If the user clicks the correct answer button, it turns green, and if they click the wrong answer, it turns red with the correct answer displayed in green. Howe ...

ThreeJs is known for effortlessly handling an abundance of vertices, far surpassing the number typically found

I came across this code snippet: function loadObject(filePath){ var loader = new THREE.OBJLoader(); loader.load( filePath, function ( object ) { child = object.children[0]; var geometry = new THREE.Geometry().fromBufferGeometry( ch ...

Press Button to create cookie and store it in Drupal 7

I am currently working on my Drupal 7 local website, which features an article and a popup on the homepage leading to that article. Within the article, there is a button that I want to serve as a way for users to dismiss the initial popup permanently. My i ...

Using the same bone structure to share skeletons among SkinnedMeshes in Three.JS

I've been grappling with the challenge of incorporating and removing clothing pieces to an existing skeleton (Clothing meshes and body meshes should share skeleton) but I always seem to encounter strange results. All the clothing items that I intend ...

Tips on setting an expiration time for verification codes in a Node.js environment

What is the best way to implement an expiration time for this verification code? I need it to be deleted from the database after 10 minutes. var fourcode = Math.floor(1000 + Math.random() * 9000); app.post("/sendforgetpassword", async (req, re ...

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png I've tried several solutions, the latest of which involves the following CSS... @me ...

React Redux causing React Router to display empty pages

In my App.js, the following code is present: const Index = asyncRoute(() => import('~/pages/index')) const Register = asyncRoute(() => import('~/pages/register')) const AddDesign = asyncRoute(() => import('~/pages/add-des ...