Jithin Reddy Jithin Reddy - 5 months ago 8
JSON Question

How to show son response in html drop down list using angular js

I'm trying to display a JSON response in a drop down list in the HTMl using Angular JS.

I'm trying to call "short name" in the agency drop down list in html.
Any ideas. Thanks in advance.

My JSON code

[{"id":1,"agencyCode":"006","agencyDescription":"null","shortName":"NJTA","cscId":1,"iagAgencyTypeId":4,"comments":"null","whoCreated":"admin","createdDate":"2016-06-13","whoUpdated":"admin","updatedDate":"2016-06-13"}]


HTML CODE

<div class="dashboard_searcharea">
<div class="col-md-3" ng-repeat="shortname in agencies"> Agency :
<select class="text_field_style smallfield">
<option value="shortname"> agencies: {{agencies.shortname}} </option>
</select>
</div>
<div class="col-md-3"> Events :
<select class="text_field_style smallfield">
</select>
</div>


Angular JS

Dashboard.controller('homeController',homeController);
function homeController($scope,$location,$http) {
$scope.dt = new Date();
$scope.popup1 = {
opened: false
};
$scope.open1 = function() {
$scope.popup1.opened = true;
};

$http.get("http://localhost:8080/EtbosAdmin/agencies")
.success(function(response) {
$scope.metrics=response.series[0].shortname;

Answer

To achieve your expected result please follow below steps

1.In Iteration use different name then the key value to avoid confusion ..for testing i have used JSON and variable x in agencies.

2.Key value is shortName , so we need to get value by x.shortName.

I have used the JSON in $scope.agencies for testing

<div class="dashboard_searcharea">
          <div class="col-md-3" ng-repeat="x in agencies"> Agency :
            <select class="text_field_style smallfield">
                      <option value="shortname">  agencies: {{x.shortName}} </option>
                      </select>

Codepen URL -http://codepen.io/nagasai/pen/EyKqMB which i have created for reference

Comments