Member Avatar for jwiere03

I am working on a little project here. I have two arrays (States, Cities) I am trying to allow the user to chose one from a select form (Choice) and then have the values of the chosen array displayed in a alert(). Obviously I could just write an if statement and display the required content depending on whether the value selected == States or Cities. But this project is just a placeholder project for me to figure out one aspect of a much larger project I am working on. And it is important for the result to be chosen dynamically as in the final project I won't know the values that the select field is being filled with.

What I need to do is take the value returned from the select field (Choice) and turn that into the name of the array and display that. If I use this code

alert(States);

then it returns the values of that array. But like I said I need to be able to dynamically select what array to display based on users input.

alert(document.getElementById("Choice").value);

returns the value chosen. How can I take the value chosen and actually display the value of the array with that same name. In other words let JS know that I don't literally want it to display the value chosen but rather the value chosen is the name of the array I want it to display?

Pseudo code
x = document.getElementById("Choice").value;
x is name of array;
alert(x);

Thanks

  • 2 Contributors
  • 2 Replies
  • 185 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jwiere03

Dani AI

Generated

Quick summary: the goal is to pick a select option and use its value to show the array that corresponds to that name. proposed grouping data; noted a global-object lookup solved the immediate problem. Both approaches work, but there are safer, more robust patterns for a dynamic app where array names and counts are not known ahead of time.

Why avoid relying on the global object long term: the global lookup only succeeds when your arrays are actual globals. It breaks in module scope, non-browser environments, or when you intentionally avoid polluting global scope. It also makes code harder to maintain and can collide with built-in properties. A simple, dependable approach is to keep all datasets in one mapping and reference that mapping from the select.

Example pattern: keep a single container and add datasets to it as users create them. Use the select option value as the key into that container.

const dataStore = Object.create(null); // no prototype keys

// add datasets dynamically
dataStore["States"] = ["Alabama","Alaska"];
dataStore["Cities"] = ["Seattle","Chicago"];

// read selection and show the array
const sel = document.querySelector("#Choice").value;
const result = dataStore[sel];

if (Array.isArray(result)) {
  alert(result.join(", "));
} else {
  alert('No dataset named "' + sel + '"');
}

Practical tips and gotchas:

  • Use Object.create(null) or a Map to avoid prototype collisions when keys come from users.
  • When populating the select, set each option value to the dataset key (or use an option data-* attribute) so the lookup is direct and predictable.
  • Validate/normalize keys taken from user input to avoid accidental property access.
  • If you need cross-environment global access, globalThis exists, but prefer an explicit mapping for clarity and safety.
    This keeps behavior predictable as your project grows and avoids the fragility of scattering named globals.

Recommended Answers

All 2 Replies

Member Avatar for sudeepjd

There is a way of doing this, but its not exactly like your Pseudo code. But it can be done dynamically.

Make the array's you want to display and array of arrays.

var data= [
	['c1',11,12,13,14,15],
	['c2',21,22,23,24,25],
	['c3',31,32,33,34,35]
];

The first elements c1,c2,c3 etc should be the names of the variables which should be selected by the user.

When the user selects an input, loop through the array's and select the one that has the first element as the same name as that selected by the user. Put that array into another variable and display it.

Hope this is close to what you are looking for.

Member Avatar for jwiere03

In my final project the user was going to be entering information for creating the arrays, so I have no idea of how many arrays, what their name is or what their content is. I could get their dynamic input into the select box but couldn't get it to display right. Posted on another forum this morning and got a answer within a hour.

var x = document.getElementById("Choice").value

var chosenArray=window[x];
alert(chosenArray);

did the trick.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.