3

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.

Improve this question

6 Answers 6

Reset to default
1 
.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.

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

1 Comment

Thank you for your advice. I tried to implement your way and variations of it, but it didn't work. Also, I used alert("test") just below $scope.contents = response.data; to check if the function was being executed, but it didn't pop up the alert message. This made me think that the code within the second curly braces is not running and I don't know the reason.
1

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.

Improve this answer

17 Comments

Thank you for your advice. I tried to implement your way and variations of it, but it didn't work. Also, I used alert("test") just below var name = data.name; //property to check if the function was being executed, but it didn't pop up the alert message. This made me think that the code within the curly braces is not running and I don't know the reason.
I did what you said: $http.get('employee.json'). then(function(response) { alert("test"); }, function(response) { alert(response); }); The result is: The alert message is displaying [object Object] instead of "test". It seems that an error is occurring.
I did this and received an error: $scope.contents = []; // Simple GET request example : $http.get('employee.json'). then(function(response) { alert("test"); }, function(response) { alert(response); $scope.contents = response;}); -The error is saying: can not get /employee.json 404 {"method":"GET","transformRequest":[null],"transformResponse"[null],"url":"employee.json","headers":{"Accept":"application/json, text/plain, /"}} Not Found
Just to facilitate the visualization of the error: This is the error I am getting: Cannot GET /employee.json 404 {"method":"GET","transformRequest":[null],"transformResponse"[null],"url":"employee.json","headers":{"Accept":"application/json, text/plain, /"}} Not Found - Do you have any advice to resolve it?
Where did you put that file in your directory
|
1

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

Regards.

Improve this answer

3 Comments

Thank you for you help, but it didn't work. Trying to implement other ways I have this error. Do you have any advice to resolve it? This is the error I am getting: Cannot GET /employee.json 404 {"method":"GET","transformRequest":[null],"transformResponse"[null],"url":"employee.json","headers":{"Accept":"application/json, text/plain, /"}} Not Found
Maybe if you get the error message, it can help. Did you test it with an online url?
I did not test with a url. The error message is the one starting with "Cannot GET" on my first comment to you. Do you know if it is possible to use the fs module from node to read the file. I am asking because I used successfully it on the server side to read a local json file. However, It didn't work on the client side.
1

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.
Improve this answer

4 Comments

Thank you for your advice. I tried to implement your way and variations of it, but it didn't work. Also, I used alert("test") just below $scope.contents = res.data; to check if the function was being executed, but it didn't pop up the alert message. This made me think that the code within the second curly braces is not running and I don't know the reason.
This is the error I am getting: Cannot GET /employee.json 404 {"method":"GET","transformRequest":[null],"transformResponse"[null],"url":"employee.json","headers":{"Accept":"application/json, text/plain, /"}} Not Found - Do you have any advice to resolve it?
Check my edit, the problem is the url from where you are retrieving the json file.
Thank you for this tip. I tried with "/" and "./" in the beginning, but it made no difference.
1

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>
Improve this answer

3 Comments

Thank you very much for the jsbin. I had success with this implementation, but I need the array with names coming from a local employee.json file. I am not having success reading the file's content. Could you update the jsbin reading the names from a file within the controllers' directory, please?
I had made a code to read local files... I will to find and, if I found, I can update the jsbin.
Well, I have not my old fonts... But I found the method I used: readFile()... it exists on young navigators, not on old IE7. Take a look on this article: odetocode.com/blogs/scott/archive/2013/07/03/…
0

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.