Construct a drop-down menu using properties extracted from a JSON file in AngularJS

Question

Construct a drop-down menu using properties extracted from a JSON file in AngularJS

Is there a way to dynamically create a select element using attributes such as select id and select class from a JSON object defined in my controller, without knowing the specific attributes beforehand?

Can this be achieved without resorting to dynamic partials with hardcoded code for each select element?

If I do not have prior knowledge of what attributes are present in the JSON object.

Thank you!

UPDATE:

For example, if the JSON data looks like this:

{ "topology" : [ 
        { "name": "id", "value":"topology_id"  },
        { "name": "class", "value": "topology_class1 topology_class2" },
        { "name": "diasbled", "value": "disabled" } 
    ]
}

I would like to generate the following select tag:

<select id="topology_id" class="topology_class1 topology_class2" disabled="disabled"></select>

Subsequently, if another JSON object contains different attributes, those attributes should populate the select tag accordingly.

javascript angularjs

Answer 1

Answer №1

To utilize the updated JSON file, implement the following approach:

// Custom template
<select dynamic-attributes='topology'></select>

// Directive for dynamic attributes
angular.module('yourModule')
    .directive('dynamicAttributes', ['jsonData', function (jsonData) {
        return function (scope, element, attrs) {
            // Retrieve attribute data from a service.
            var attributes = jsonData.get(attrs.dynamicAttributes);
            // Apply each attribute to the element.
            attributes.forEach(function (attribute) {
                element.attr(attribute.name, attribute.value);
            });
        }
    }]);

// Service handling JSON data
angular.module('yourModule')
    .service('jsonData', function () {
        // Typically fetched from a server.
        var json = { 
            "topology" : [ 
                { "name": "id", "value":"topology_id"  },
                { "name": "class", "value": "topology_class1 topology_class2" },
                { "name": "diasbled", "value": "disabled" } 
            ]
        };

        // Public methods
        return {
            get: function (name) {
                return json[name];
            }
        };
    });

View the functioning demo on this fiddle: http://jsfiddle.net/nfreitas/SmWE8/ (ignore the styling showcasing the added attributes.)

Answer 2

To utilize the updated JSON file, implement the following approach:

// Custom template
<select dynamic-attributes='topology'></select>

// Directive for dynamic attributes
angular.module('yourModule')
    .directive('dynamicAttributes', ['jsonData', function (jsonData) {
        return function (scope, element, attrs) {
            // Retrieve attribute data from a service.
            var attributes = jsonData.get(attrs.dynamicAttributes);
            // Apply each attribute to the element.
            attributes.forEach(function (attribute) {
                element.attr(attribute.name, attribute.value);
            });
        }
    }]);

// Service handling JSON data
angular.module('yourModule')
    .service('jsonData', function () {
        // Typically fetched from a server.
        var json = { 
            "topology" : [ 
                { "name": "id", "value":"topology_id"  },
                { "name": "class", "value": "topology_class1 topology_class2" },
                { "name": "diasbled", "value": "disabled" } 
            ]
        };

        // Public methods
        return {
            get: function (name) {
                return json[name];
            }
        };
    });

View the functioning demo on this fiddle: http://jsfiddle.net/nfreitas/SmWE8/ (ignore the styling showcasing the added attributes.)

Construct a drop-down menu using properties extracted from a JSON file in AngularJS

Answer №1

Similar questions

I'm having trouble getting my object to display using ng-repeat in Angular. Can anyone help me understand what I'm missing?

How can an Angular module/component be displayed independently as well as embedded within another module/component?

Import a new JavaScript file and access a variable

Using only the $http.get method, you can easily retrieve data in a simple

How can I hide a root layout component in specific nested routes within the app directory of Next.js?

Typescript implementation for structuring JSON response data from API calls

Properly removing an object from a THREE.js scene while still preserving it in the HEAP

Checking the security status of a PDF file in the web browser to determine if it

Strategies for filtering fields in LoopBack based on the included model

Revamping the Backbone collection by resetting and parsing data

Callback function for Jeditable when the form is reset

Implementing a Global Timezone Setting for the Entire Application

What is the significance of using the "why" in the href property within the

Discover the art of concurrently listening to both an event and a timer in JavaScript

Failed to fetch http://localhost:8000/Stack/script.js due to network error 404 in Django project

Instead of pressing "w" to walk, simply click on the A-frame screen

Keeping an Rxjs observable alive despite encountering errors by simply ignoring them

Utilizing Omit for the exclusion of nested properties within a TypeScript interface

Initially, the 'display none' CSS command may not take effect the first time it is used

Utilizing JavaScript to verify the presence of a div element within dynamically injected HTML code