How can I extract specific data from a JSON response and populate a select dropdown with AngularJS?

Question

How can I extract specific data from a JSON response and populate a select dropdown with AngularJS?

My current project involves making an http.get request to fetch a list of airports. The JSON response is packed with information, presenting a series of objects in the format shown below

{"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guinea","iata":"GKA","icao":"AYGA","latitude":"-6.081689","longitude":"145.391881","altitude":"5282","timezone":"10","dst":"U","tz":"Pacific/Port_Moresby"}

The task at hand is to extract the country and IATA code from this data and showcase them within a select element on my HTML page as demonstrated below

Papua New Guinea GKA
Greenland UAK ...

I've managed to generate an array of objects containing these specific details (in a factory function) and have subsequently passed it back into my array. However, I'm currently grappling with how to exhibit two distinct pieces of data in a select element.

javascript angularjs drop-down-menu factory

Answer 1

Answer №1

To effectively display data in a dropdown menu, utilize the ng-options directive within the select element.

If your data array consists of objects with structure like this:

$scope.airports = [{id:1,name:"Papa New Guinea",iata: "GKA"},...]

You can present them in a select field as shown below:

<select ng-model="selectedAirport" ng-options="(itm.name + ' ' + itm.iata) for itm in airports"></select>

For a functioning example, refer to this plunkr

Answer 2

To effectively display data in a dropdown menu, utilize the ng-options directive within the select element.

If your data array consists of objects with structure like this:

$scope.airports = [{id:1,name:"Papa New Guinea",iata: "GKA"},...]

You can present them in a select field as shown below:

<select ng-model="selectedAirport" ng-options="(itm.name + ' ' + itm.iata) for itm in airports"></select>

For a functioning example, refer to this plunkr

Answer 3

Answer №2

If you're looking to implement the ng-options directive for applying ng-repeat functionality on a select element in AngularJS, check out the documentation here: https://docs.angularjs.org/api/ng/directive/ngOptions. For instance, if your array of airports can be fetched synchronously, you can do so in your controller:

module.controller('ctrl', function($scope, Airports) {
    $scope.airports = Airports.get();
    $scope.$watch('airportId', function(newValue) {
        console.log(newValue);
    });
});

In your template, make use of Angular's expression parsing like this:

<select ng-options="for item in airports" ng-model="airportId">
    <option value="item.id" ng-bind="item.country + ' ' + item.iata"></option>
</select>

Alternatively, display the values directly within the option tag:

<select ng-options="for item in airports" ng-model="airportId">
    <option value="item.id">{{item.country}} {{item.iata}}</option>
</select>

Answer 4

If you're looking to implement the ng-options directive for applying ng-repeat functionality on a select element in AngularJS, check out the documentation here: https://docs.angularjs.org/api/ng/directive/ngOptions. For instance, if your array of airports can be fetched synchronously, you can do so in your controller:

module.controller('ctrl', function($scope, Airports) {
    $scope.airports = Airports.get();
    $scope.$watch('airportId', function(newValue) {
        console.log(newValue);
    });
});

In your template, make use of Angular's expression parsing like this:

<select ng-options="for item in airports" ng-model="airportId">
    <option value="item.id" ng-bind="item.country + ' ' + item.iata"></option>
</select>

Alternatively, display the values directly within the option tag:

<select ng-options="for item in airports" ng-model="airportId">
    <option value="item.id">{{item.country}} {{item.iata}}</option>
</select>

Answer 5

Answer №3

To combine the properties together:

<div ng-app="myApp">
            <div ng-controller="myCtrl">

                <select ng-model="model.id" ng-options='note.id as (note.name+" "+note.iata) for note in notes' ></select>

                {{model.iata}}

            </div>

        </div>

https://jsfiddle.net/7eqsc/146/

Answer 6

To combine the properties together:

<div ng-app="myApp">
            <div ng-controller="myCtrl">

                <select ng-model="model.id" ng-options='note.id as (note.name+" "+note.iata) for note in notes' ></select>

                {{model.iata}}

            </div>

        </div>

https://jsfiddle.net/7eqsc/146/

Answer 7

Answer №4

To display specific data from a JSON object without the need to clear it, you can utilize the ng-options directive in AngularJS:

<body ng-app="selectExample">
  <script>
    angular.module('selectExample', [])
      .controller('AirportController', ['$scope', function($scope) {
        $scope.airports = [{
          "id": "1",
          "name": "Goroka",
          "city": "Goroka",
          "country": "Papua New Guinea",
          "iata": "GKA",
          "icao": "AYGA",
          "latitude": "-6.081689",
          "longitude": "145.391881",
          "altitude": "5282",
          "timezone": "10",
          "dst": "U",
          "tz": "Pacific/Port_Moresby"
        }, {
          "id": "2",
          "name": "RAF Cranwell",
          "city": "Coningsby",
          "country": "Lincolhshire",
          "iata": "QCY",
          "icao": "EGXC",
          "latitude": "",
          "longitude": "",
          "altitude": "",
          "timezone": "10",
          "dst": "U",
          "tz": ""
        }];
      }]);
  </script>
  <div ng-controller="AirportController">

    <label>Select Airport:
      <select ng-model="selectedAirport" ng-options="airport.name + ' - ' + airport.iata for airport in airports"></select>
    </label>
    <pre>
        {{selectedAirport}}
    </pre>
    <br/>
  </div>
</body>

Click here to view the code in action

Answer 8

To display specific data from a JSON object without the need to clear it, you can utilize the ng-options directive in AngularJS:

<body ng-app="selectExample">
  <script>
    angular.module('selectExample', [])
      .controller('AirportController', ['$scope', function($scope) {
        $scope.airports = [{
          "id": "1",
          "name": "Goroka",
          "city": "Goroka",
          "country": "Papua New Guinea",
          "iata": "GKA",
          "icao": "AYGA",
          "latitude": "-6.081689",
          "longitude": "145.391881",
          "altitude": "5282",
          "timezone": "10",
          "dst": "U",
          "tz": "Pacific/Port_Moresby"
        }, {
          "id": "2",
          "name": "RAF Cranwell",
          "city": "Coningsby",
          "country": "Lincolhshire",
          "iata": "QCY",
          "icao": "EGXC",
          "latitude": "",
          "longitude": "",
          "altitude": "",
          "timezone": "10",
          "dst": "U",
          "tz": ""
        }];
      }]);
  </script>
  <div ng-controller="AirportController">

    <label>Select Airport:
      <select ng-model="selectedAirport" ng-options="airport.name + ' - ' + airport.iata for airport in airports"></select>
    </label>
    <pre>
        {{selectedAirport}}
    </pre>
    <br/>
  </div>
</body>

Click here to view the code in action

How can I extract specific data from a JSON response and populate a select dropdown with AngularJS?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Modify section background color for every iteration in an image carousel

A distinct handler function designed for a dynamically generated form

Warning: React detects a missing dependency within an interval in the effect

AngularJS's $http.get function has the ability to read text files, but it struggles with reading JSON

Exploring scope in an angular service

Using JavaScript/jQuery to tally characters

What steps should I take to ensure the privacy of this React Layout?

What is the procedure for utilizing Javascript to redirect a user on a website back to the login page if necessary?

What is the best way to transfer $scope to a service in angular.js?

Failing to catch the return value from a stored procedure in ASP Classic

Transferring an array from PHP to Javascript using GET method

Provide JSON data on a designated pathway

Learn how to effectively utilize templateURL in an express and angular project

Encountering an ongoing problem with trial repetition in JsPsych, which is causing the looping to continue endlessly without

Discovering the most cost-effective combination algorithm

Error: The application encountered an issue while trying to initialize the module

Looking for a way to assign the object value to ng-model within a select tag from an array of objects? Also, curious about how to easily implement filters on ng-options?

Implementing a delete functionality within a loop on a JavaScript object array

Checking if the iframe location has been modified using Jquery

Is it possible to retrieve the pixel color of a mesh by clicking on it in JavaScript?