Getting value from JSON array in AngularJS

Question

{
"websites": [{
    "A": "www.foo.com"
}, {
    "B": "www.boo.com"
}, {
    "C": "www.zoo.com"
}]

}

I have the above JSON array which my controllers inserts into the scope by doing the following:

$http.get('data/websites.json')
    .success(function (data) {
        $scope.websites = data;
    });

In my view, I have a variable that's either A, B or C. I just need to display the corresponding website in the view.

So - to sum it up:

In my view, I want to be able to do something like: {{websites.website.B}} and it would show the corresponding website URL.

Answer 1

You have to loop through $scope.websites and match key with your view variable. If its matching then display value for that key.

Using something like:

    angular.forEach(obj, function(value, key) {
      if(key == <view variable>) {
      // use value to display appropriate website
      }
    });

Answer 2

  Try this code.

 <li ng-repeat="stuff in websites ">
    <a href="{{stuff.A}}" target="_blank">{{stuff.A}}</a>
    <a href="{{stuff.B}}" target="_blank">{{stuff.B}}</a>
    <a href="{{stuff.C}}" target="_blank">{{stuff.C}}</a>  
</li>

Answer 3

The short answer is you simply have to use ng-repeat to loop through your json content after you have fetched the data from your json content then simply interpolate the corresponding parts you wish to pull to your DOM elements (HTML) using the $scope service