How to load json file into Angularjs for ng-repeat

Question

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.

Rafael · Accepted Answer · 2014-12-01 04:18:35Z

4

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

edited Dec 1, 2014 at 4:18

answered Dec 1, 2014 at 3:48

Rafael

7,78613 gold badges36 silver badges49 bronze badges

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

3 Comments

ian-campbell Over a year ago

I am getting 404 error in my django dev server when it tries to GET my json file.

ian-campbell Over a year ago

Stuck it in my django static folder because my app knows about that folder.

Rafael Over a year ago

Awesome glad to hear you got it!

Sam Storie · Accepted Answer · 2014-12-01 04:12:56Z

1

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.

answered Dec 1, 2014 at 4:12

Sam Storie

4,5744 gold badges50 silver badges76 bronze badges

2 Comments

ian-campbell Over a year ago

I fixed it by putting the json file into my static folder which is referenced in my django settings.py file. Your mentioning web.config made me think to put the json file into a folder that django knows about.

Sam Storie Over a year ago

Good to hear you figured it out!

Suchit kumar · Accepted Answer · 2014-12-01 04:00:30Z

0

you can try this:

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

answered Dec 1, 2014 at 4:00

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to load json file into Angularjs for ng-repeat

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related