CODEWITHSUNDEEP
angularjsjsontags
user5336527
user5336527

Reputation:

Can't load json result using angular in a select tag

enter image description here

So I have here an angular code to fetch json records. It's all working good. But it does not display on the view. I wanted the json results to be displayed on a select tag, here's the code for the view part 

<div class="col s6 input-field" ng-controller="positionController">
<select id="selectPosition" ng-model="selectedPosition" ng-options="item as item.PosDesc for item in records">
</select>
<label>Choose Position</label>
</div>

But it doesn't display anything on the view. Is there something wrong with my code? Thank you.

edit : here's the json value enter image description here

Upvotes: 0

Views: 87

Answers (2)

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

Your code works fine.

Check this demo.

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

  app.filter("capitalize", function() {
    return function(input, all) {
      var reg = (all) ? /([^\W_]+[^\s-]*) */g : /([^\W_]+[^\s-]*)/;
      return (!!input) ? input.replace(reg, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
      }) : "";
    };
  });

  app.controller("positionController", ["$scope", "$http",
    function($scope, $http) {
      $http.get("https://gist.githubusercontent.com/dannyjhonston/dfbb68cffa626c2e29b3/raw/5c6fc8c1f7529fe25a6a848e9154c5b778dd3eb3/jsonFile.json").success(function(response) {
        $scope.records = response;
        $scope.selectedPosition = $scope.records[0];
      });
    }
  ]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
  <div class="col s6 input-field" ng-controller="positionController">
    <select id="selectPosition" ng-model="selectedPosition" ng-options="item as item.PosDesc for item in records">
    </select>
    <label>Choose Position</label>
  </div>
</div>

JSFiddle

Upvotes: 1

Shalabh Raizada
Shalabh Raizada

Reputation: 364

Change ng-model="selectedPosition" to ng-model="(selectedPosition | json)". To display in select use angular code like: 

<select id="selectPosition" ng-model="(selectedPosition | json)" 
   ng-options="item as item.PosDesc for item in records">
   {{ selectedPosition | json }}
</select>

Upvotes: 0

Related Questions