Read JSON file from controller and render as <li> using ng-repeat
My employee.json file is in the same directory as my controller.
This is the data of my json file:
["John", "Clark"]
On the controller, I have:
.controller('EmployeeCtrl', function ($scope, $http) {
$http.get('employee.json').then(function (res) {
$scope.contents = res.data;
});
});
On the template, I:
<div>
<label class="control-label">Identify yourself:</label>
<select ng-model="market.name">
<option ng-repeat="content in contents" value="{{content}}">{{content}} </option>
</select>
</div>
Does anyone know why this is not working? My dropdown is displaying nothing.
I started working this way: On the client side, I created a new folder (service) for the jasonFactory service in the /script/service/jasonFactory.js application. Service code:
angular.module('clientApp')
.factory('jsonFactory', function ($q, $http) {
return {
getOtherStuff: function () {
var deferred = $q.defer(),
httpPromise = $http.get('data/Employee.json');
httpPromise.then(function (response) {
deferred.resolve(response);
}, function (error) {
console.error(error);
});
return deferred.promise;
}
};
});
Also, I created a new folder (data) to have a json file named Employee.json in /data/Employee.json app. Content for json file:
{"names": [
{"name": "John"}
]}
Then I added the code to the controller file /script/controllers/usedController.js. Code for controller:
.controller('AddCtrl', function (jsonFactory) {
$scope.otherStuff = {};
jsonFactory.getOtherStuff()
.then(function (response) {
$scope.otherStuff = response.data.names;
alert($scope.otherStuff);
}, function (error) {
console.error(error);
alert("test");
});
});
Also, the template looks like this:
<select>
<option ng-repeat="stuff in otherStuff" value="{{stuff.name}}"> {{stuff.name}}</option>
</select>
I believe that at the time the promise is resolved the digest cycle has already started, perhaps using $scope.$apply
solves your problems, as it will start the digest cycle again:
$http.get('employee.json').then(function (res) {
$scope.$apply(function () {
$scope.contents = res.data;
});
});
As per the comment, it seems like the problem is with the json url you are trying to fetch, have you tried adding a forward slash at the beginning of the url to make it relative to your domain?
$http.get('/employee.json') //Note i've added "/" at the beginning.
.controller('EmployeeCtrl', function ($scope, $http) {
$http.get('employee.json').success(function (res) {
$scope.contents = response.data;
});
});
Also make sure the data in the JSON file is formatted correctly.
Hmm, Maybe you tried to be a general, but you json file is not an object. You might want to make sure your JSON is in the {'label': 'info'} format. Then this response returns all json as object as "res".
So if your json had {name: mike, job: ninja},
$http.get(file).then(function(res){
var data = res; //object
var name = data.name; //property
}
Hope this helps.
If you move the file to the www folder, you should be fine. Worked with me. Or where is your index.html.
Sincerely.
You need to use (key, value) when iterating:
See that jsbin:
http://jsbin.com/segevojibe/edit?html,js,output
<select ng-model="market.name">
<option ng-repeat="(key, content) in contents" value="{{content}}">{{content}}</option>
</select>