ng-repeat array from json file

Question

I'm very new to AngularJS, and have tried to find an answer to my following question around the web.

So my issue is as follows: I have a handler (.ashx) file on my site. The handler returns a JSON array. It's located on the following URL: /services/returnsites.ashx

It's a quite simple JSON aray that looks like this:

[{"NodeId":a93064,"NodeName":"Planes"},{"NodeId":a49856,"NodeName":"Bicycles"},{"NodeId":a19631,"NodeName":"Cars"}]

I'd like to loop through each of the sites in the json array.

I have an html-file containing this:

<div ng-controller="My.Controller">
    <ul>
        <li ng-repeat="site in sites">
            {{site.NodeName}} - {{site.NodeId}}
        </li>
    </ul>
</div>

I have a controller as well, looks like this:

angular.module("umbraco").controller("My.Controller", function($scope) {
   ...
});

What I need is to put something instead of the trhee dots to grab the array from the json file.

I can get it working if I my controller looks like this (containing the array the controller file):

angular.module("umbraco").controller("My.Controller", function($scope) {
    $scope.sites = [
    {
        NodeName: "Planes",
        NodeId: "a93064"
    },
    {
        NodeName: "Bicycles",
        NodeId: "a49856"
    },
    {
        NodeName: "Cars",
        NodeId: "a19631"
    }
    ];
});

But I can't get it working if I'm trying to grab the array from the file on the server. I've tried a couple of different things including something like the $hhtp.get() etc. copied from around the web, but nothing seems to work :(

I hope that someone can help me out.

Thank you very much in advance.

/Kim

Could you post the response headers of your web service output? It's possible you've missed out some CORS headers to allow JavaScript to make a request. $http certainly seems to be one way to do it in this case, so possibly it's a CORS issue.. Do you see any errors in the JS console if you use a simple $http.get() call? — cgwyllie
– cgwyllie, Commented Nov 13, 2014 at 19:51
Ohh, sorry cgwyllie, didn't even see your comment before I saw the correct answer below. But thanks for yout time anyways. — Kim Andersen
– Kim Andersen, Commented Nov 13, 2014 at 20:07

halilb · Accepted Answer · 2014-11-13 19:56:00Z

2

First of all, your backend's JSON response is not well formatted. NodeId values have to be string, as they contain non-numeric characters.

[{
    "NodeId": "a93064",
    "NodeName": "Planes"
}, {
    "NodeId": "a49856",
    "NodeName": "Bicycles"
}, {
    "NodeId": "a19631",
    "NodeName": "Cars"
}]

After fixing that, you just need to use $http get method to make backend request.

.controller('My.Controller', function($scope, $http) {
    $http.get('returnsites.ashx').success(function(sites) {
      $scope.sites = sites;
    });
});

Here is a working plunker.

answered Nov 13, 2014 at 19:56

halilb

4,1251 gold badge25 silver badges32 bronze badges

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

Comments

Mike Thibault · Accepted Answer · 2014-11-13 19:58:27Z

1

An $http.get() should do the trick. Try:

$scope.sites = [];

$http.get('/services/returnsites.ashx').success(function(data) {
    $scope.sites = data;
});

answered Nov 13, 2014 at 19:58

Mike Thibault

2131 gold badge3 silver badges11 bronze badges

2 Comments

Kim Andersen Over a year ago

Thank you for your answer Mike. Halib get's the correct answer as he aswered first. But thanks to you as well for your time.

Mike Thibault Over a year ago

np, he must have answered as I was typing :)

Collectives™ on Stack Overflow

ng-repeat array from json file

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related