Questionwith AngularJS ng-repeat and json data

Question

Being new to AngularJS it seems certain things should be simple but I reaching out for support on the correct way to retrieve json data using ng-repeat. I've searched through other posts but still cannot solve the problem. What am I doing wrong here?

html:

  <html lang="en" ng-app="configApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Configuration Admin</title>

</head>
<body>
<div ng-controller="OrganizationProgramCtrl">
    <ul>
        <li ng-repeat="program in programs">{{programs.title}}</li>
    </ul>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script>
    var configApp = angular.module("configApp", []);
    function OrganizationProgramCtrl($scope, $http) {
        $scope.programs = [];
        $http.get('data/programs.json')
                .success(function (data, status, headers) {
                    console.log("Data Found");
                    $scope.programs = data;
                });
    }
</script>

</body>
</html>

json data:

{
    "programs": [{
        "title": "MA History"
    }, {
        "title": "MA  Biology"
    }, {
        "title": "MA Chemistry"
    }, {
        "title": "MA Classical Studies"
    }, {
        "title": "MA Liberal Arts"
    }]
}

i think you want $scope.programs = data.programs; in your success callback, otherwise you would need to do program in programs.programs in your ngRepeat. Also you may need to parse the json string to an object, JSON.parse(data). As i do not know if angular does it automatically or not. — Patrick Evans
– Patrick Evans, Commented Jun 26, 2014 at 17:07

Chris Southam · Accepted Answer · 2014-06-26 17:12:36Z

1

You code needs a couple of changes but you're almost there:

$scope.programs = data.programs;

and (singular program for title

<li ng-repeat="program in programs">{{program.title}}</li>

Working reference version here:
http://plnkr.co/edit/JwmmA5?p=preview

answered Jun 26, 2014 at 17:12

Chris Southam

5822 gold badges5 silver badges12 bronze badges

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

Comments

Jon · Accepted Answer · 2014-06-26 17:10:43Z

0

In your ng-repeat you are assign the current iterator item to a variable called program however in your html to are referencing {{programs.title}} (programs with an 's')

Change it to this and it should work {{program.title}}

answered Jun 26, 2014 at 17:10

Jon

4,2956 gold badges50 silver badges56 bronze badges

2 Comments

Jon Over a year ago

Sweet no worries - good luck with learning angular. One day it will all just click!

Jon Over a year ago

@jmccommas - don't forgot to mark the correct answer

Collectives™ on Stack Overflow

Questionwith AngularJS ng-repeat and json data

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