CODEWITHSUNDEEP
javascriptjsonangularjs
Rafa
Rafa

Reputation: 31

Read JSON file from the Controller and display as <li> using ng-repeat

My employee.json file is on the same directory as my controller.

This is the data on 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 have:

<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 dropdownlist displays nothing.

Upvotes: 3

Views: 508

Answers (6)

Rafa
Rafa

Reputation: 31

I put to work this way: On the client side, I created a new folder (service) to have the service called jasonFactory on the app/script/service/jasonFactory.js. The code for the service is:

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 the json file called Employee.json on the app/data/Employee.json. The content for the json file is:

{"names": [
{"name": "John"}
]}

Then, I added some code on the controller file app/script/controllers/usedController.js. The code for the controller is:

.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 goes like this:

<select>
      <option ng-repeat="stuff in otherStuff" value="{{stuff.name}}">          {{stuff.name}}</option>
</select>

Upvotes: 0

Joao Polo
Joao Polo

Reputation: 2163

You need to use (key, value) on repeat:

Look 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>

Upvotes: 1

taxicala
taxicala

Reputation: 21759

I believe that at the time the promise gets resolved, the digest cycle has already ran, perhaps using $scope.$apply solves your issues as it will run the digest cycle again: 

$http.get('employee.json').then(function (res) {
    $scope.$apply(function () {
        $scope.contents = res.data;
    });
});

As per the comment, it seems the problem relies in the url of the json you are trying to retrieve, did you try adding a 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.

Upvotes: 1

cagica
cagica

Reputation: 679

If you move your file to the www folder it should be alright. Worked with me. Or where your index.html is.

Regards.

Upvotes: 1

ace040686
ace040686

Reputation: 163

Hmm, Maybe you were trying to be general, but you json file isn't an object. You might want to make sure your JSON is in the {'label': 'info'} format. Then, that response only returns the whole json as an 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
}

I hope this helps.

Upvotes: 1

cbender
cbender

Reputation: 2251

.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 properly.

Upvotes: 1

Related Questions