Angular.js is failing to show the array of objects that was fetched using $http.get

Question

Angular.js is failing to show the array of objects that was fetched using $http.get

As someone who is new to angular.js, I am currently exploring the functionalities of $http methods such as $http.get and $http.post.

In my simple application, I am retrieving messages from a MySQL database via a Java rest service. The data retrieved displays in the following format:

[
  {id:1, content:"Hello World!"}, 
  {id:2, content:"Testing 1, 2, 3..."}, 
  {id:3, content:"I am from the database"}
]

My goal is to list these messages using ng-repeat with the following structure:

<div ng-controller="MessageController">
  <ul>
    <li ng-repeat="m in messages">{{m.content}}</li>
  </ul>
</div>

The corresponding controller code appears as follows:

function MessageController($scope, $http) {
  $scope.getAll = function(callback) {
    $http.get('/messages').success(function(response) { callback(response); });
  }

  $scope.messages = $scope.getAll(function(data) { return JSON.stringify(data); });
}

Although I can see that the call successfully returns an array of message objects and I can view them in the console from within the callback function, they are not appearing in the ng-repeat. Strangely enough, I was able to display them properly when manually generating a list of messages. Is there something I am overlooking?

EDIT: I am utilizing angular.js version 1.2.19

javascript angularjs

Answer 1

Answer №1

According to AngularJS version 1.2, arrays are no longer automatically unwrapped from a Promise by default (refer to migration notes). Although it may still work with Objects, the documentation advises against relying on this behavior.

Instead, it is recommended to use $resource. Resources now return 'future' objects instead of Promises. These 'future' objects are initially empty and will populate themselves once the REST call resolves (example).

In your scenario, a sample implementation might look like the following (pseudo code):

function MessageController($scope, $resource) {
    var resource = $resource('/messages');
    $scope.messages = resource.query(function (data) {
        return JSON.stringify(data); // questionably necessary
    });
    // $scope.messages = resource.query(); // should suffice
}

Remember to add the ngResource module dependency (include angular-resource.js in your index.html):

var app = angular.module('myApp', ['ngResource'])

Answer 2

According to AngularJS version 1.2, arrays are no longer automatically unwrapped from a Promise by default (refer to migration notes). Although it may still work with Objects, the documentation advises against relying on this behavior.

Instead, it is recommended to use $resource. Resources now return 'future' objects instead of Promises. These 'future' objects are initially empty and will populate themselves once the REST call resolves (example).

In your scenario, a sample implementation might look like the following (pseudo code):

function MessageController($scope, $resource) {
    var resource = $resource('/messages');
    $scope.messages = resource.query(function (data) {
        return JSON.stringify(data); // questionably necessary
    });
    // $scope.messages = resource.query(); // should suffice
}

Remember to add the ngResource module dependency (include angular-resource.js in your index.html):

var app = angular.module('myApp', ['ngResource'])

Answer 3

Answer №2

In order to populate the $scope.messages variable, it is important to assign a value within the success function of the $get http call. Here's an example code snippet demonstrating this: (check out example link)

var app = angular.module('myApp', []);

app.controller('DataController', function($scope, $http) {

  $scope.getData = function() {
    $http.get('data.json').success(function(response) {
      $scope.messages = response;
    });
  }

  $scope.getData();

});

Answer 4

In order to populate the $scope.messages variable, it is important to assign a value within the success function of the $get http call. Here's an example code snippet demonstrating this: (check out example link)

var app = angular.module('myApp', []);

app.controller('DataController', function($scope, $http) {

  $scope.getData = function() {
    $http.get('data.json').success(function(response) {
      $scope.messages = response;
    });
  }

  $scope.getData();

});

Answer 5

Answer №3

It's unclear why your code is not functioning as expected, but the suggestion below may provide a solution. The variable $scope is being updated within the callback function.

function MessageController($scope, $http) {
  $scope.getAll = function(callback) {
    $http.get('/messages').success(function(response) { callback(response); });
  }

  $scope.getAll(function(data) { $scope.messages = JSON.stringify(data); });
}

Answer 6

It's unclear why your code is not functioning as expected, but the suggestion below may provide a solution. The variable $scope is being updated within the callback function.

function MessageController($scope, $http) {
  $scope.getAll = function(callback) {
    $http.get('/messages').success(function(response) { callback(response); });
  }

  $scope.getAll(function(data) { $scope.messages = JSON.stringify(data); });
}

Answer 7

Answer №4

This is my solution:

Upon receiving the call, I set a variable to false
```
$scope.rendering = false;
```
After completing the call successfully:
```
$scope.rendering = true;
```

Finally, in the HTML code, implement

ng-if="rendering" ng-model="myModel"

All the best!

Answer 8

This is my solution:

Upon receiving the call, I set a variable to false
```
$scope.rendering = false;
```
After completing the call successfully:
```
$scope.rendering = true;
```

Finally, in the HTML code, implement

ng-if="rendering" ng-model="myModel"

All the best!

Angular.js is failing to show the array of objects that was fetched using $http.get

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unlimited image rotation with JQuery

The function createTheme_default is not defined in box.js for Material UI

Unable to access property within JSON object sent via POST request

What is the best method for sending XML data to a URL using JavaScript within an Adobe AIR application?

Exploring the Power of Merging HTML with JavaScript in Shopify

The function is not functioning properly due to an issue with the HTTP request

Trouble arises when emitting events in Vue using eventHub

When attempting to access http://localhost:3000/traceur in Angular 2 with the angular-in-memory-web-api, a 404 (Not Found) error

Is there a way to adjust the font size in Javascript/Html without changing the color?

Errors encountered while using AngularJS HTTP GET request

Make the checkbox font-weight bold when it is checked

Create JSX code for rendering components outside of the main component

Using a combination of Vue.js, Flask, and AWS Cognito for seamless authentication

Animations experiencing delays on mobile Chrome

TestCafe has encountered an issue: "There are no tests available to run. This may be due to either the test files not containing any tests or the filter function being too

In search of a VueJS Getter that specifically retrieves the values of the final JSON property and displays them as an array

Create a library with CSS files added, excluding any test files

Hide an Angular button when a page is loaded, depending on the information found in a table

Is there a way to intercept and control mousewheel scrolling before it occurs?

Steps to sending a request with a custom user agent