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
  });

Just set $scope.something = data and then your views will be like: {{something.WhateverIsInJSONID}}, or whatever — Tom
– Tom, Commented Jul 21, 2015 at 18:15

Brant · Accepted Answer · 2015-07-21 18:22:55Z

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.

edited Jul 21, 2015 at 18:22

answered Jul 21, 2015 at 18:17

Brant

1,78811 silver badges19 bronze badges

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

Comments

Daniel Cottone · Accepted Answer · 2015-07-21 18:15:22Z

1

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

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

answered Jul 21, 2015 at 18:15

Daniel Cottone

4,52029 silver badges39 bronze badges

Comments

Tom · Accepted Answer · 2015-07-21 18:19:55Z

1

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

answered Jul 21, 2015 at 18:19

Tom

7,7401 gold badge26 silver badges49 bronze badges

3 Comments

Brant Over a year ago

Downside of your for loop example is the potential for overwriting a previous key attached to scope. For instance a $scope.someKey = function... and you then have .someKey in your returned data object for which you then overwrite your function. Unsafe.

Tom Over a year ago

@Brant, agreed, I wouldn't do it this way, but to satisfy the question I added it.

Brant Over a year ago

Figured you added for that reason.

Arpit · Accepted Answer · 2015-07-21 18:26:04Z

-2

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.

answered Jul 21, 2015 at 18:26

Arpit

222 bronze badges

Collectives™ on Stack Overflow

AngularJS http get json

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related