AngularJS http get json

Question

First time trying to get json data and bind it to my form using AngularJS. I am able to bind the json this way but it requires I manually match "data" to each of my items in my html.

http call from my controller:

  $http.get('static.json').
    success(function(data, status, headers, config) {
      // here I have to manually copy all my json to bind with "data"
      $scope.SiteID = data.SiteID;
      $scope.SiteCode = data.SiteCode;
  }).
  error(function(data, status, headers, config) {
    // log error
  });

My json:

{
  "SiteID":"mySiteIDGoesHere",
  "SiteCode":"mySiteCodeGoesHere"
}

Is there a way to automatically bind my json without having to go through each item manually? eg:

  $http.get('static.json').
    success(function(data, status, headers, config) {
      "just pull in whatever my json is and bind it"
      $scope.WhateverIsInJSONID = data.WhateverIsInJSONID;
      $scope.WhateverIsInJSONCode = data.WhateverIsInJSONCode;
  }).
  error(function(data, status, headers, config) {
    // log error
  });

Answer 1

In your success function, bind your data to $scope.data like so:

$scope.data = data

Then - within your html, all your ng-models, ng-values, etc would be bound as such:

<p>{{data.someKey}}</p><img ng-src="data.imgSrc" />....

In addition, its unsafe to strap many keys in an arbitrary fashion to scope. And I don't mean the occasional .data or .whatever being added to scope. But when you blindly iterate an object and strap each key on to $scope, you run the risk of overwriting some other key that may already be set or the key your setting be overwritten later in the controller. Perhaps you have a function attached to scope that gets overwritten by blind assigning, or vice versa.

Answer 2

You could just set $scope.data = data;...

Then in your view you could access data.SiteID, or data.SiteCode, etc.

Answer 3

As mentioned, you can simply set an item on the $scope to data and then reference it using dot notation, like:

$scope.data = data;

And then:

<span>{{data.WhateverIsInJSONID}}</span>

If you want each property on the $scope individually, you would have to loop through them and add them, something like:

for (var property in data) {
  if (data.hasOwnProperty(property)) {
    $scope[property] = data[property];
  }
}

Which would give you $scope.WhateverIsInJSONID and $scope.WhateverIsInJSONCode

Answer 4

No. In angular you have to put data in scope($scope) one by one inside controller then you can access it in HTML either {{blah}} or use of ng-models directive ,ng-values etc.