CODEWITHSUNDEEP
javascriptjsonangularjs
ian-campbell
ian-campbell

Reputation: 1665

How to load json file into Angularjs for ng-repeat

I have a simple json file with a list of artist names, like

["Vincent van Gogh", "Leonardo da Vinci", "Pablo Picasso"]

I can't figure out how to load this external json file into an angularjs array and use ng-repeat on it. The non-working code I tried is:

<tr ng-repeat="artist in artists">
    <td>{({ artist })}</td>
    <td></td>
</tr>

<script>
var artApp = angular.module('artApp', []);

artApp.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{({').endSymbol('})}');
});

artApp.controller('mycontroller', function($scope,$http){
   $scope.artists = [];
   $http.get('/home/user/artist_names.json').success(function(data) {
      angular.forEach(data.MainRegister,function(entry) {
         $http.get(entry.url).
          success(function(data) {
            $scope.artists.push(angular.extend(entry,data.SubInformation);
         });
      });
   });
});
</script>

Not only does this controller code not work, but it breaks my $interpolateProvider code and makes the html actually display my raw angular variables.

Upvotes: 1

Views: 6654

Answers (3)

Rafael
Rafael

Reputation: 7746

Example link at the bottom for ng-repeat

artApp.controller('TodoCtrl', function($scope, $http) {
$http.get('/home/user/artist_names.json')
       .then(function(result){
          $scope.artists = result.data;                
        });
});

In html

  <ul>
    <li ng-repeat="artist in artists">
      {{artist.name}}
    </li>
  </ul>

IN YOUR JSON

[{ "name":"Vincent van Gogh"},
 { "name":"Leonardo da Vinci"},
 { "name":"Pablo Picasso"}]

http://plnkr.co/edit/Wuc6M7?p=preview

From jaime

I ran into this issue with a node server hosted in Azure and the fix was to ensure the mime type for JSON files was set properly. I was hosting in azure so that meant ensuring a web.config existed with the right settings, but I'm not sure what's required with Django. Without the proper mime type the server would report a 404 like you mentioned.

From Sam Storie

Upvotes: 4

Sam Storie
Sam Storie

Reputation: 4564

I ran into this issue with a node server hosted in Azure and the fix was to ensure the mime type for JSON files was set properly. I was hosting in azure so that meant ensuring a web.config existed with the right settings, but I'm not sure what's required with Django. Without the proper mime type the server would report a 404 like you mentioned.

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

you can try this:

 $http.get("/home/user/artist_names.json")
    .success(function(response) {$scope.artists = response;});

Upvotes: 0

Related Questions