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-01T04:18:35.297

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 01 '14 at 04:18

answered Dec 01 '14 at 03:48

Rafael

7,605
13
31
46

I am getting 404 error in my django dev server when it tries to GET my json file. – ian-campbell Dec 01 '14 at 04:02
Stuck it in my django `static` folder because my app knows about that folder. – ian-campbell Dec 01 '14 at 04:26
Awesome glad to hear you got it! – Rafael Dec 01 '14 at 04:29

score 1 · Answer 2 · answered Dec 01 '14 at 04:12

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 01 '14 at 04:12

Sam Storie

4,444
4
48
74

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. – ian-campbell Dec 01 '14 at 04:25
Good to hear you figured it out! – Sam Storie Dec 01 '14 at 16:20

score 0 · Answer 3 · answered Dec 01 '14 at 04:00

0

you can try this:

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

answered Dec 01 '14 at 04:00

Suchit kumar

11,809
3
22
44

How to load json file into Angularjs for ng-repeat

3 Answers3

Linked