cody cody - 1 month ago 5x
AngularJS Question

why can't I access data within this ng-repeat?

I made the below code to learn Angular. It uses the input entered by user to make an ajax request for a json file that contains a list of object, then print that list to the user.

<script src=""></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('myController', function($http) {
var ctlr = this;
ctlr.param = "";
ctlr.responses = [];

this.makeQuery = function() {
$http.get('http://localhost:8080?p=' + ctlr.param))
.then(function(data) {
ctlr.response = data; // data -> [{key1: value1,...},...]

<body ng-app="myApp">
<div ng-controller="myController as mc">
<input type="text" ng-model="mc.param">
<input type="submit" ng-click="mc.makeQuery()" value="Submit">
<li ng-repeat="res in responses">
<span>{{res.key1}}, {{res.key2}}</span>

When I run this code in Chrome, I see a list of empty bullet points. Chrome DevTools shows the json file returned as expected so I know
works. However the list has empty bullet points so
does not work correctly. It seems I cannot access
properly. Does anyone know why?


Your responses object is binded to this and not to $scope as you are using controller as You should use mc.responses instead of responses

<li ng-repeat="res in mc.responses">
     <span>{{res.key1}}, {{res.key2}}</span>

You can read more from johnpapa style