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.
source to share
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>
source to share
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.
source to share
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.
source to share
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>
source to share