Tips for showing the chosen value in a select option field retrieved from a JSON object using AngularJS

Question

Tips for showing the chosen value in a select option field retrieved from a JSON object using AngularJS

After fetching a json object containing the list of countries, I am trying to display the selected country name in a select option box. However, I have encountered issues where only a blank value is shown.

Note: The countries variable holds the json object with key-value pairs representing the countries. This is used to populate the select options in the view. Additionally, tabs[0].data.country refers to the country ID that needs to be pre-selected.

Here are some snippets of code that I have attempted:

Code for displaying the selected country name: https://i.sstatic.net/9zzF5.png
Code for displaying the select options in the View: https://i.sstatic.net/6rGYE.png

Current Output: https://i.sstatic.net/VkHKi.png

javascript angularjs json

Answer 1

Answer №1

To begin, transform your JSON object into an array of objects and then proceed with the following code:

<select name="countries" id="contries" ng-model="vm.country">
  <option ng-repeat="country in vm.countries" value="{{country.id}}">{{country.name}}</option>
</select>

Simply iterate through the array and select the desired elements from the list. For more detailed instructions, please refer to the complete documentation available here: https://docs.angularjs.org/api/ng/directive/select

Answer 2

To begin, transform your JSON object into an array of objects and then proceed with the following code:

<select name="countries" id="contries" ng-model="vm.country">
  <option ng-repeat="country in vm.countries" value="{{country.id}}">{{country.name}}</option>
</select>

Simply iterate through the array and select the desired elements from the list. For more detailed instructions, please refer to the complete documentation available here: https://docs.angularjs.org/api/ng/directive/select

Answer 3

Answer №2

Finally, after much searching, I found the snippet that resolved my issue.

html

<div ng-controller="ExampleController">
   <form name="myForm">
     <label for="mySelect">Make a choice:</label>
     <select name="mySelect" id="mySelect"
        ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption">
     </select>
   </form>
</div>

js

angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
     };
 }]);

To find more information, you can visit this link

There's also another helpful tutorial here

Answer 4

Finally, after much searching, I found the snippet that resolved my issue.

html

<div ng-controller="ExampleController">
   <form name="myForm">
     <label for="mySelect">Make a choice:</label>
     <select name="mySelect" id="mySelect"
        ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption">
     </select>
   </form>
</div>

js

angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
     };
 }]);

To find more information, you can visit this link

There's also another helpful tutorial here

Tips for showing the chosen value in a select option field retrieved from a JSON object using AngularJS

Answer №1

Answer №2

Similar questions

Transfer the information of a selected element to a different element

What causes the discrepancy in time between a node.js server and mongodb?

Creating a custom inner class in JAVA to handle complex JSON data involves defining a class within

I'm having trouble getting jQuery to work properly with Bootstrap buttons

Package for validating forms in Meteor using React

successful callback after passport registration

what version of Node.js is required for Ionic V1.4.3

Closing a live search box by tapping away from it

Generate permutations with a specified length parameter using a JavaScript permutation generator

Converting constants into JavaScript code

Results from AWS DynamoDB Scan operation

Pull information from nested JSON arrays and organize it into a more streamlined array

How can I convert a .json file into a mongoose schema?

Using knex.js to pipe data to an express server

An issue arises with ReactJS MaterialUI Stepper when there is an overflow

Ways to retrieve a value from a multidimensional array in PHP

Eliminating the need for RequireJS in the Typescript Visual Studio project template

What could be causing the page to refresh every time a post or update is made using a mock REST API with JSON

Is there a chance of overlooking messages when utilizing long polling with nginx and the pushstream module?

Is this approach to implementing content security policy acceptable?