Eliminate quotation marks from an array in order to function as a function with a variable

Question

Eliminate quotation marks from an array in order to function as a function with a variable

I receive an array from a JSON object. I then need to loop through the array because it contains function names that I want to execute.

The following code snippet works when entered manually:

var view_functions = [
    header,
    footer
];

for (i = 0; i < view_functions.length; i++) {

    view_functions[i]();             
}

However, in reality, the view_functions variable should be populated dynamically from the JSON data, rather than hard-coded. The JSON structure is as follows, containing an array of function names with quotes around them:

"functions" : ["header","footer"]

So, when extracting the JSON data, it is presented as an array with quotes around each element. How can I convert this structure into a usable view_functions variable without the quotes?

Thank you for your help!

javascript arrays json

Answer 1

Answer №1

Consider giving this a shot:

    let user_functions = your_json_object.methods; // ["navigation", "sidebar"]

    for (let method of user_functions) {

        window[method]();             
    }

Answer 2

Consider giving this a shot:

    let user_functions = your_json_object.methods; // ["navigation", "sidebar"]

    for (let method of user_functions) {

        window[method]();             
    }

Answer 3

Answer №2

To clarify, it's important to note that a JSON "object" doesn't actually exist; JSON is strictly a string format.

If you opt to store your functions within a placeholder object (referred to as a "dummy" object in this example), you can then easily access properties that correspond to the names listed in an array.

var view_functions = { "functions" : ["header", "footer"] };

var dummy = {
    header: function(){ console.log("header"); },
    footer: function(){ console.log("footer"); }
};

// Iterate through the strings in the array and call the function
// associated with the corresponding key in the dummy object:
view_functions.functions.forEach(function(f){
   dummy[f]();
});

Answer 4

To clarify, it's important to note that a JSON "object" doesn't actually exist; JSON is strictly a string format.

If you opt to store your functions within a placeholder object (referred to as a "dummy" object in this example), you can then easily access properties that correspond to the names listed in an array.

var view_functions = { "functions" : ["header", "footer"] };

var dummy = {
    header: function(){ console.log("header"); },
    footer: function(){ console.log("footer"); }
};

// Iterate through the strings in the array and call the function
// associated with the corresponding key in the dummy object:
view_functions.functions.forEach(function(f){
   dummy[f]();
});

Answer 5

Answer №3

To determine whether the functions are in the global scope, you can utilize this approach:

window[view_functions[i]]();

Note that globally defined functions are essentially methods of the global window object, making them accessible through bracket notation window[...]. By employing bracket notation instead of using eval, you avoid potential risks.

If the functions belong to an object, simply substitute window with the object's name.

It is advisable to verify the existence of the function before calling it:

Object.prototype.toString(window[view_functions[i]]) === "[object Function]"

var funcObj = JSON.parse("{\"functions\" : [\"header\" , \"footer\"]}");

header = function() {
  console.log("test header");
}

footer = function() {
  console.log("test footer");
}

for (var i = 0; i < funcObj.functions.length; i++) {
  if (Object.prototype.toString.call(window[funcObj.functions[i]]) === "[object Function]") {
    window[funcObj.functions[i]]();
  }
};

Answer 6

To determine whether the functions are in the global scope, you can utilize this approach:

window[view_functions[i]]();

Note that globally defined functions are essentially methods of the global window object, making them accessible through bracket notation window[...]. By employing bracket notation instead of using eval, you avoid potential risks.

If the functions belong to an object, simply substitute window with the object's name.

It is advisable to verify the existence of the function before calling it:

Object.prototype.toString(window[view_functions[i]]) === "[object Function]"

var funcObj = JSON.parse("{\"functions\" : [\"header\" , \"footer\"]}");

header = function() {
  console.log("test header");
}

footer = function() {
  console.log("test footer");
}

for (var i = 0; i < funcObj.functions.length; i++) {
  if (Object.prototype.toString.call(window[funcObj.functions[i]]) === "[object Function]") {
    window[funcObj.functions[i]]();
  }
};

Answer 7

Answer №4

To loop through the array, you can use Array.prototype.forEach() and access functions within the Global context using either the keyword window or this.

Check out this code snippet that uses this[fn]():

function printHeader() {
  console.log("Printing header");
}

function printFooter() {
  console.log("Printing footer");
}

const pageFunctions = { 
  "functions": ["printHeader", "printFooter"] 
};

pageFunctions.functions.forEach(fn => this[fn]());

Answer 8

To loop through the array, you can use Array.prototype.forEach() and access functions within the Global context using either the keyword window or this.

Check out this code snippet that uses this[fn]():

function printHeader() {
  console.log("Printing header");
}

function printFooter() {
  console.log("Printing footer");
}

const pageFunctions = { 
  "functions": ["printHeader", "printFooter"] 
};

pageFunctions.functions.forEach(fn => this[fn]());

Eliminate quotation marks from an array in order to function as a function with a variable

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Retrieving Django view information using AJAX

What is the method for sending arguments to material avatar using require?

Python script for converting log.txt file to JSON

The property 'label' is not found in the 'string' type in Typescript

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

What is the best way to store multiple checkbox categories as an array in a JSON object within a React application

Validating User Input for Java Arrays

Using a `foreach` loop in PHP to organize data into groups

Why are uppercase letters not allowed in field names for Amazon CloudSearch?

Clear the input field value when the onClick event occurs, and retain the value if not changed

My ability to click() a button is working fine, but I am unable to view the innerHTML/length. What could be the issue? (NodeJS

Facing an issue with the GPT-3.5 Turbo post request functionality in a Node.js application

What is the significance of combining two arrays?

Display the designated element upon clicking the designated link exclusively

Automate the process of adding or removing a class created by material ui through programming

"Implementing Notifications in Mongoose: A Step-by-Step Guide

Choosing the appropriate data type for form data on the server

Retrieve an array field across various documents and combine the elements to form a single object

Determine the specified keys within a JSON object using Python