Replace hard coded json with http get

Question

Working on learning some Angular and I was wondering how I could replace this hardcoded JSON array to the JSON that is pulled with the http get. Here is the plunker im working on. At the top I do this to populate the dropdown i'm using:

angular.module('myapp', [])
  .controller('MainCtrl', function($scope, $http) {
    var records;
    $scope.selCountry = '';
    $scope.searchText = '';
    $http.get('http://www.w3schools.com/angular/customers.php').success(function(dt) {
      //window.alert(angular.toJson(dt));

      var countries = [];
      records = dt.records;
      dt.records.forEach(function(o) {
        var c = o.Country;
        if (countries.indexOf(c) == -1)
          countries.push(c);
      });
      $scope.countries = countries;
      $scope.total = countries.length;
    });

I don't know if this is where I would fill the array as well? Or is it even done like that (like I did above). Do I have to create the array for all objects or can I just access the incoming JSON. Thx.

You don't need to create an array if you don't want you can simply bind to the returned JSON object. Eg `$scope.customers = dt.records`. Generally speaking you want to assign your results when you get them so this is the correct place to do so. You may have more abstractions such as error handling etc but this is generally correct — Charleh, Apr 20 '15 at 19:34
Angular will take care of updating the UI if you are binding anything to the customers variable in the scope (by dirty checking/whatever other methods the framework uses) — Charleh, Apr 20 '15 at 19:37
Check out restangular: https://github.com/mgonto/restangular — alex, Apr 20 '15 at 19:38
So since I already say `records = dt.records`, in the html can I just say `

nweg · Accepted Answer · 2015-04-20T19:51:35.637

1

Yes, this is where you would assign the api response to your scope variables. You could write it like this:

 $http.get('http://www.w3schools.com/angular/customers.php').success(function(dt) {
  //window.alert(angular.toJson(dt));

  $scope.countries = [];
  $scope.records = dt.records;
  dt.records.forEach(function(o) {
    var c = o.Country;
    if ($scope.countries.indexOf(c) == -1)
      $scope.countries.push(c);
  });
  $scope.total = $scope.countries.length;
});

You also don't need the $scope.total variable. You can just access that by using $scope.countries.length

edited Apr 20 '15 at 19:51

answered Apr 20 '15 at 19:37

nweg

2,825
3
22
30

That _is_ just how I wrote it? – erp Apr 20 '15 at 19:48
I got rid of your local countries variable since you didn't need it. You just want to use your $scope.countries variable. I just read your other comment. See my updated answer. You need to expose records by putting it on the scope. – nweg Apr 20 '15 at 19:50
ah ok thanks, so then how would I access the data in the html? From the `$scope.records`?. Like on the line `
` I am currently accessing each item in the data array, how would I do it in your instance?

erp

Apr 20 '15 at 19:56

1

Just use records. You leave the $scope part off. data-ng-repeat="item in records | orderBy:'Name':reverse | filter:selCountry | filter:searchText" – nweg Apr 20 '15 at 19:57

Replace hard coded json with http get

1 Answers1