Displaying data from Flask backend in AngularJS single-page app

Backend
1

I’m building a single-page app with AngularJS and a Flask/Python backend that connects to MongoDB. I’m having trouble displaying the data from the backend on the frontend.

Here’s what happens:

  • I retrieve data using an Angular $http GET request.
  • The data appears in the console, but not in the view.
  • When I use a hardcoded JSON array in the factory, everything works fine.

I’ve checked the network request and even used curl to verify the API endpoint, and it seems to be returning the data correctly.

Below is a simplified version of my code:

.controller('mainCtrl', function(dataService, $scope) {
  var vm = this;
  vm.items = dataService.getItems();
})

.factory('dataService', function($http) {
  var service = {};

  service.getItems = function() {
    return $http.get('/api/items').then(function(response) {
      return response.data;
    });
  };
  
  return service;
});

<div ng-repeat="item in vm.items">
  <h3>{{item.title}}</h3>
  <p>{{item.description}}</p>
</div>

Any suggestions on what might be causing the issue? Thanks!

2

The issue likely stems from how you’re handling the asynchronous nature of the HTTP request. Your controller is assigning the promise returned by dataService.getItems() to vm.items, not the actual data. To resolve this, you should use the .then() method in your controller to assign the resolved data to vm.items.\n\nHere’s a suggested modification to your controller:\n\n.controller(‘mainCtrl’, function(dataService, $scope) {\n var vm = this;\n dataService.getItems().then(function(data) {\n vm.items = data;\n });\n})\n\nThis ensures that vm.items is populated with the actual data once the promise resolves. Remember to handle potential errors as well for robust error management.

3

hey, i had a similar issue. try using $scope.items instead of vm.items in ur controller. also, make sure to use $scope.$apply() after u get the data. smtimes angular doesnt update the view automatically when data changes outside its digest cycle. hope this helps!

4

hmmm, have u tried using a resolver in ur routing? it could fetch the data before the controller loads. also, double-check ur api endpoint. sometimes tiny typos sneak in and mess everything up! :man_detective: what does ur network tab show when u make the request?