Adding choices to dropdown menu in AngularJS

Question

Adding choices to dropdown menu in AngularJS

As a beginner in AngularJs, I am struggling with appending options to select boxes created by javascript. Below is the code snippet that is causing the issue.

var inputElements = $('<div><label style="float:left;">' + i + '</label><select ng-model="object" class="form-control sel" style="width:300px; float:right; margin-right:75px;"> <option>select</option></select></div></br></br>');
var temp = $compile(inputElements)($scope);
$('#projOrder').append(temp);
$scope.object = object;
//for(var opt=0; opt<selOptLabels.length; opt++) {
$('.sel').append('<option ng-repeat="obj in object" value="'+
{{obj.value}}+'">'+{{obj.value}}+'</option>');

I encountered this error message: "SyntaxError: invalid property id"

Greetings, here is an example of some JSON data. This is just a snippet from my larger dataset.

    "ProjectOrder": {
"Connect direct required": {
  "value": "N",
  "id": "STR_15523_62"
},
"Cores": {
  "value": ".5",
  "id": "NUM_15523_50"
},
"Permanent data in GB": {
  "value": "100",
  "id": "NUM_15523_56"
},
"Description": {
  "value": "AZBNL azbngb",
  "id": "STR_15523_2"
},
...
"WORK data in GB": {
  "value": "100",
  "id": "NUM_15523_55"
}

}

Now, my task is to generate input fields and dropdown menus (if applicable) using the provided JSON data.

javascript angularjs json

Answer 1

Answer №1

Constructing HTML manually like this is not recommended. It's better to utilize a template and delegate the heavy lifting to the template engine.

I observed that you are using object as the ng-model. It would be more appropriate to have a separate variable to store the selected value.

Here is an improved approach for achieving this in an .html file:

<div ng-repeat="object in listOfObjects"
    <label style="float: left">{{ $index }}</label>
    <select ng-model="selectedValues[$index]" class="form-control sel"
        style="width:300px; float:right; margin-right:75px;"
        ng-options="obj.value for obj in object"></select>
</div>

Then, in your JavaScript controller:

// array to hold selected values
$scope.selectedValues = new Array(list.length);
// list of objects
$scope.listOfObjects = list;

This may not be the most elegant solution, but essentially, I've created an array with the same length as the list of objects. In Angular templates, within an ng-repeat, $index is a special variable that keeps track of the current index in the loop.

Hence, when a user modifies the selected value of the 3rd select box (index 2), $scope.selectedValues[2] will capture the chosen option.

EDIT: Converting JSON to an array example:

var list = Object.keys(json).map(function(jsonKey) {
    return {
        name: jsonKey,
        label: json[jsonKey].label,
        value: json[jsonKey].value
    };
});`

Answer 2

Constructing HTML manually like this is not recommended. It's better to utilize a template and delegate the heavy lifting to the template engine.

I observed that you are using object as the ng-model. It would be more appropriate to have a separate variable to store the selected value.

Here is an improved approach for achieving this in an .html file:

<div ng-repeat="object in listOfObjects"
    <label style="float: left">{{ $index }}</label>
    <select ng-model="selectedValues[$index]" class="form-control sel"
        style="width:300px; float:right; margin-right:75px;"
        ng-options="obj.value for obj in object"></select>
</div>

Then, in your JavaScript controller:

// array to hold selected values
$scope.selectedValues = new Array(list.length);
// list of objects
$scope.listOfObjects = list;

This may not be the most elegant solution, but essentially, I've created an array with the same length as the list of objects. In Angular templates, within an ng-repeat, $index is a special variable that keeps track of the current index in the loop.

Hence, when a user modifies the selected value of the 3rd select box (index 2), $scope.selectedValues[2] will capture the chosen option.

EDIT: Converting JSON to an array example:

var list = Object.keys(json).map(function(jsonKey) {
    return {
        name: jsonKey,
        label: json[jsonKey].label,
        value: json[jsonKey].value
    };
});`

Answer 3

Answer №2

There are multiple reasons why that approach may not be effective. The code provided is flawed due to the template brackets being appended to the HTML string...

$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>');

Is there a specific rationale behind constructing your markup in JavaScript?

It's generally recommended to avoid using jQuery within Angular controllers. If jQuery is loaded, the jQuery object can be accessed via angular.element, otherwise Angular utilizes jQuery light.

Instead of delving into other issues here, I have prepared a simple example showcasing how a select element functions in Angular:

https://codepen.io/parallaxisjones/pen/BRKebV

Furthermore, it would be beneficial to refer to the Angular documentation prior to asking queries on platforms like Stack Overflow. The documentation includes a clear demonstration of utilizing ng-repeat within a select element. https://docs.angularjs.org/api/ng/directive/select

EDIT: My codepen has been updated with an illustration of fetching JSON data through an HTTP GET request

EDIT: The codepen has been revised with an example of iterating over an object using (key, value) syntax within ng-repeat for JSON data

Answer 4

There are multiple reasons why that approach may not be effective. The code provided is flawed due to the template brackets being appended to the HTML string...

$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>');

Is there a specific rationale behind constructing your markup in JavaScript?

It's generally recommended to avoid using jQuery within Angular controllers. If jQuery is loaded, the jQuery object can be accessed via angular.element, otherwise Angular utilizes jQuery light.

Instead of delving into other issues here, I have prepared a simple example showcasing how a select element functions in Angular:

https://codepen.io/parallaxisjones/pen/BRKebV

Furthermore, it would be beneficial to refer to the Angular documentation prior to asking queries on platforms like Stack Overflow. The documentation includes a clear demonstration of utilizing ng-repeat within a select element. https://docs.angularjs.org/api/ng/directive/select

EDIT: My codepen has been updated with an illustration of fetching JSON data through an HTTP GET request

EDIT: The codepen has been revised with an example of iterating over an object using (key, value) syntax within ng-repeat for JSON data

Adding choices to dropdown menu in AngularJS

Answer №1

Answer №2

Similar questions

Combine arrays of JSON data within a JSON object using JavaScript

Utilizing PHP and AJAX to Extract Information from a MySQL Database

I am looking for some guidance on utilizing the data obtained from a JSON response in a separate HTML file with AngularJS. Can

Transform the Hue or Color of a PNG using ASP.Net, VB.Net, and jQuery

What is the best way to handle an OR scenario in Playwright?

How to integrate an AngularJS page into a Node application

Calculating the combined cost of items in the shopping cart

How do you vertically span a grid element across 3 rows using Material UI?

Error: Unable to access property of an undefined value (ExpressJS/POST)

When trying to link a Redis microservice with NestJS, the application becomes unresponsive

Creating dynamic components in ReactJS allows for versatile and customizable user interfaces. By passing

NodeJS is constantly refreshing the data in the database table

Error: The PDFJS variable is not recognized when trying to load a PDF file

Using React to map and filter nested arrays while also removing duplicates

Is there a way to assign a value to an element based on whether I receive a true or false?

What steps should I follow to properly set up my tsconfig.json in order to ensure that only the essential files are included when executing npm run build

Running a cfquery in a cfc and passing parameters through AJAX

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Unable to assign value to a public variable in Angular

What is the process for setting the spinner value according to the preferences value?