CODEWITHSUNDEEP
angularjsjson
Lz430
Lz430

Reputation: 327

Angular error when trying to retrieve JSON

I'm trying to retrieve a simple JSON list and inject it into a dropdown list.

However, I'm getting an error from the following JS. 

var rac  =  angular.module('rac', ['angular.filter']);

rac.controller('prodCtrl', function($scope, $http, $sce, $filter){
  var dataURL = 
$sce.trustAsResourceUrl('http://www.mocky.io/v2/5b1ef454310000fa163ffa45');
  $http({
    method: 'JSONP',
    url: dataURL
  }).then(function ($scope, response) {
    $scope.products.data = response;
    console.log($scope.products);
  }, function (response) {
    console.log("Mr. Data. Report! " + response);
  });   
});

My HTML: 

<div class="row">
<div class="container">
  <h1>Leonard Zakoor - Rolled Alloys </h1>
  <div ng-controller="prodCtrl">
    <h3>Please choose a product</h3>
    <select>
      <option ng-repeat="product in products">{{product.name}}</option>
    </select>


  </div>

</div>

The error I'm getting is: TypeError: Cannot set property 'data' of undefined

On line 9

$scope.products.data = response;

Upvotes: 1

Views: 49

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222522

You need to define $scope.products = [];

and then ng-repeat over,

 <option ng-repeat="product in products">{{product.name}}</option>

EDIT: I have made few changes on the request as follows,

rac.controller('prodCtrl', function($scope, $http, $sce, $filter) {
  $http.jsonp($sce.trustAsResourceUrl("https://www.mocky.io/v2/5b1ef454310000fa163ffa45"), {
      jsonpCallbackParam: 'callback'
    })
    .then(function(data) {
        $scope.products = data.data.products;
      },
      function(error) {}
    );
});

WORKING DEMO

Upvotes: 1

Related Questions