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

Question

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;

score 1 · Accepted Answer · answered Jun 14 '16 at 22:55

1

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

answered Jun 14 '16 at 22:55

Naga Sai A

10,771
1
21
40

Thank you for your response Naga Sai. But for some reason my scope isn't working. Is that the right way of doing it. – JRed Jun 15 '16 at 00:37
Yes Jithin, try assigning your response data or JSON object to agencies variable and the code which I have mentioned will work for you – Naga Sai A Jun 15 '16 at 00:51
I tried with your code but no luck. Question is does it take data from the URL http://localhost:8080/EtbosAdmin/agencies . Doesn't it work dynamically from link. – JRed Jun 15 '16 at 01:36
If you are trying from local host URL, you will get CORS error in your developer console....follow this link which might be helpful for you - http://stackoverflow.com/questions/31612931/cors-issue-on-localhost-while-calling-rest-service-from-angularjs – Naga Sai A Jun 15 '16 at 01:54

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

1 Answers1