Angular $http get not working.

Question

So my file.json is :

[
    { 
        'id' : 1,
        'name' : 'img/1.jpg' 
    },
    {
        'id' : 2,
        'name' : 'img/2.jpg' 
    },
    {
        'id' : 3,
        'name' : 'img/3.jpg' 
    },
    {
        'id' : 4,
        'name' : 'img/4.jpg' 
    },
    {
        'id' : 5,
        'name' : 'img/5.jpg' 
    }

]

And my controller is :

app.controller("MyCtrl", ["$scope", "$http", function($scope, $http){
    
    $http.get("file.json").then(function(data){
        $scope.template = data;
    
    });
    
}]);

So from my html page im calling the controller and doing a ng-repeat but not working:

<div class="container" ng-controller="MyCtrl">
<div ng-repeat="path in template.names">
<div class="inner">
    <img ng-src="{{path.name}}">
</div>
</div>

I keep getting error in console:

Matthew Cawley · Accepted Answer · 2017-02-12 00:14:17Z

3

Your JSON is invalid, you need to use double quotes " rather than single quotes '

Also, because you are using then() the data you're after will be wrapped inside a response object, so you will have to update that part of your code as follows:

$http.get("file.json").then(function(response){
    $scope.names = response.data;
});

And then update your ng-repeat as @Anonymous suggests:

<div ng-repeat="path in names">

And change this part (the {{ }} are not necessary here):

<img ng-src="path.name">

edited Feb 12, 2017 at 0:14

answered Feb 11, 2017 at 23:35

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

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

5 Comments

Somename Over a year ago

Followed this. <div ng-controller="MyCtrl" ng-repeat="path in names"> <p>{{path.name}}</p> </div> Even this is not working.

Matthew Cawley Over a year ago

Hmm, strange, can you do a console.log(response) (inside of success callback) and post back what that returns?

Matthew Cawley Over a year ago

Looks fine, so now you should be able to assign response.data to the $scope variable that you're using in your ng-repeat. Failing that can you do a {{ names }} in your view and see what that outputs.

Somename Over a year ago

I did the same: $http.get("file.json").then(function(response){ $scope.names = response.data; }); and in the html `<div ng-repeat="path in names"> <p> {{ path.names }} </p> </div>. But nothing is displayed.

Somename Over a year ago

Let us continue this discussion in chat.

Monika Bozhinova · Accepted Answer · 2017-02-11 23:41:10Z

1

It should be <div ng-repeat="path in template">, not <div ng-repeat="path in template.names">. And also json standard for string is double quotes.

edited Feb 11, 2017 at 23:41

answered Feb 11, 2017 at 23:33

Monika Bozhinova

2943 silver badges16 bronze badges

2 Comments

Somename Over a year ago

I did that. Nothing is showing. I tried:

<div class="container" ng-controller="MyCtrl"> <div ng-repeat="path in template"> <div class="inner">     <p>{{path.name}}</p> </div> </div>

But nothing is showing. Nothing in the console also.

Matthew Cawley Over a year ago

@Somename @Anonymous is correct in that you should change your ng-repeat, but you also need to change how you retrieve your data as it will be wrapped inside a response object.

gianni · Accepted Answer · 2017-02-11 23:34:48Z

0

try using this:

$scope.template = JSON.parse(data);

And make sure your json file is valid: http://jsonlint.com/

answered Feb 11, 2017 at 23:34

gianni

1,3672 gold badges17 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular $http get not working.

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related