how to populate a drop down menu with data coming to controller using http get in angular js

Question

This is the JSON file .. Using angular js controller and view how can I parse this json and display the drop1 and drop2 values of respective technology in drop down menu.getting the JSON data using http get. Thanks in advance

 {
        "technology": [
            {
                "id": "AKC",
                "detail": {
                    "drop1": [
                        {
                            "id": "AKC-lst-1231"
                        },
                        {
                            "id": "AKC-lst-1232"
                        },
                        {
                            "id": "AKC-lst-1233"
                        }
                    ],
                    "drop2": [
                        {
                            "id": "T_AKC_live"
                        },
                        {
                            "id": "T_AKC_Capt"
                        },
                        {
                            "id": "T_AKC_live1"
                        }
                    ]
                }
            },
            {
                "id": "MET",
                "detail": {
                    "drop1": [
                        {
                            "id": "MET-2st"
                        },
                        {
                            "id": "MET-34"
                        }
                    ],
                    "drop2": [
                        {
                            "id": "sd-232"
                        },
                        {
                            "id": "sd-121"
                        }
                    ]
                }
            }
        ]
    }

c'mon what did you even try? – Shreejibawa Feb 27 '15 at 05:52 — Shreejibawa, Feb 27 '15 at 05:52

score 0 · Answer 1 · answered Feb 27 '15 at 05:52

Please consider this example:

<!DOCTYPE html>
<html ng-app="postExample">
     <head>
          <script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
          <script src="usersController.js"></script>
          <script src="userRepoService.js"></script>
    </head>

    <body ng-controller="UsersController">
        <h1>Post Angular Example</h1>
        <select id="UserSelector" style="width: 100%;">
            <option ng-repeat="user in users" value="{{user.id}}">{{user.login}}   </option>
        </select>
    </body>
</html>

userRepoService.js

(function(){

var userRepoService = function($http){

  var getUsers = function(username){
        return $http.get("https://api.github.com/users")
                    .then(function(response){
                       return response.data; 
                    });
  };

  return {
      get: getUsers
  };

};

var module = angular.module("postExample");
module.factory("userRepoService", userRepoService);

}());

Controller:

(function(){

   var app = angular.module("postExample",[]);

   var UsersController = function($scope, userRepoService){

   var onFetchError = function(message){
      $scope.error = "Error Fetching Users. Message:" +message;
 };

   var onFetchCompleted = function(data){
      $scope.users =data;
   };

   var getUsers = function(){
       userRepoService.get().then(onFetchCompleted,onFetchError);
   };

   getUsers();     

};

app.controller("UsersController", UsersController);

}());

Please visit this [link](http://stackoverflow.com/questions/17968760/how-to-set-a-selected-option-of-a-dropdown-list-control-using-angular-js) also — Ravi Chhatrala, Feb 27 '15 at 05:58

score 0 · Answer 2 · answered Feb 27 '15 at 20:25

You can directly call $http service, and get that response inside success data parameter.

CODE

$http.get("test.json").
success(function(data, status, headers, config) {
  //get data and play with it
}).
error(function(data, status, headers, config) {
  alert("Error fetching data");
  // log error
});

Hope this could help you, Thanks.

how to populate a drop down menu with data coming to controller using http get in angular js

2 Answers2