AngularJS - GET response unable to display in HTML

Question

I have a simple view where a bunch of JSON data gets displayed. The problem I'm facing is when I try to display the directly from within the factory the data is displayed but the same data when access via a $http.get request is not getting displayed! The data is being fetched but the JSON format is changing during the fetch request.

My controller code is as below:

angular.module('ngCribs')
.controller('cribsController', function($scope, cribsFactory) {
  $scope.cribs;

  cribsFactory.getCribs().then(function(data) {
    console.log(data);
    $scope.cribs = data;
  }, function(data) {
    console.log(data);
  });

});

My Factory code:

angular.module('ngCribs')
.factory('cribsFactory', function($http) {

  function getCribs() {
    return $http.get('data.json');
  }

  return {
    getCribs: getCribs
  };

});

The JSON object as I have created:

[
  {
    "type": "Condo",
    "price": 220000,
    "address": "213 Grove Street",
    "description": "Excellent place, really nice"
  },
  {
    "type": "House",
    "price": 410000,
    "address": "7823 Winding Way",
    "description": "Excellent place, really nice and beautiful"
  },
  {
    "type": "Duplex",
    "price": 395000,
    "address": "2834 River Lane",
    "description": "Great, really nice"
  }
]

What is getting outputted on the console:

Here is a snapshot of the consoled object

Here is a plunker link to my progress so far

https://plnkr.co/edit/GTZJC2cCCzE1KfLAD5wF?p=preview

As you can see in the plunker the data isn't getting displayed. Please help and guide me as to where I'm making a mistake.

Thanks.

use data.data to get the api response. data.data is your array object. Replace this line as `$scope.cribs = data.data;' — Karthik
– Karthik, Commented Jan 18, 2017 at 3:09
As suggested by @Nhan, just update your code to get the data, then I think it should work $scope.cribs = data.data; — CrazyMac
– CrazyMac, Commented Jan 18, 2017 at 4:45

Nhan · Accepted Answer · 2017-01-18 03:19:34Z

1

In cribsController.js, you are getting the whole response object, change it to data.data to access the response data only.

cribsFactory.getCribs().then(function(data) {
  console.log(data);
  $scope.cribs = data.data;
}, function(data) {
  console.log(data);
});

edited Jan 18, 2017 at 3:19

answered Jan 18, 2017 at 3:11

Nhan

3,9356 gold badges35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Roca · Accepted Answer · 2017-01-18 03:13:54Z

0

Change <div class="well" ng-repeat="crib in cribs">

To

<div class="well" ng-repeat="crib in cribs.data">

You should use data.data in order for you to loop.

answered Jan 18, 2017 at 3:13

John Roca

1,2442 gold badges16 silver badges29 bronze badges

Collectives™ on Stack Overflow

AngularJS - GET response unable to display in HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related