Associative Arrays and Populating Drop Downs and Text Boxes

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Take a look at our YouTube channel and subscribe to be notified about new videos!

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at some frequently asked questions about us and our products!

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

John Clarke

In my code I want to create an associative array. For example :

// Setup the associative array
var MyObjects = { "one" : "Text Value 1", 
                              "two" : "Text Value 2",  
                              "three": "Text Value 3" };

On my view I want to have a drop down. How can I dynamically populate the drop down with the key values from the associative array (e.g. one, two, three) ?

As well as the drop down there will be 3 Text Input Boxes. The Input Boxes will be called one, two and three. So when I select one from the drop down the value of the Input Box called one will be set to Text Value 1. If I select two from the drop down the value of the input box called two will be set to Text Value 2.

How can I implement this ?

DecSoft

Hello John,

I think that can understand exactly what you wanted. The problem is the time... since you don't post an specific question... I will try to prepare an example for you as quickly as possible. They can take not too much time... or may the things become complex and more time is required... so let me to have some time in order to start with that sample and then I will post it here.

Purchase one or more licenses of our products if they are useful to you!

John Clarke

I thought I would post my solution to this issue :

I created a view with the following items :

Select Box called Select 1
Text box called one
Text box called two
Text box called three

On the show function for the view I added the following code :

startjs

// Setup the associative array
window.App.RootScope.MyObjects = { "one" : "Text Value 1",
                                   "two" : "Text Value 2",
                                   "three": "Text Value 3" };

// Populate the drop down

// Add an empty one
window.App.RootScope.Select1.Items[window.App.RootScope.Select1.Items.length] = "";

// Add the key values
for (var key in window.App.RootScope.MyObjects)
{
    window.App.RootScope.Select1.Items[window.App.RootScope.Select1.Items.length] = key;
}

endjs

and on the change function for the select box I added the following code :

startjs
       // Get the selected item
       SelectedItem = window.App.RootScope.Select1.Items[window.App.RootScope.Select1.ItemIndex];
       
       // Set the text box value for the selected item
       if (SelectedItem.length > 0)
          document.getElementById(SelectedItem).value = window.App.RootScope.MyObjects[SelectedItem];
endjs

My only concern is that is it sensible to use document.getElementById(SelectedItem).value in the code or is there a better method?

DecSoft

Hello John,

Your code it's quite curious, since, in principle, the DropDown controls expected a non associative Array: you provide an associative Array, so the control take the key's values. Maybe other do the things in other way, but, your code works as expected too.

About your concern, certainly you are not exactly set the value of the AB controls. Do that it's just replace one line of your code:

// Instead of this:
if (SelectedItem.length > 0)
  document.getElementById(SelectedItem).value = window.App.RootScope.MyObjects[SelectedItem];

// You can do this:
if (SelectedItem.length > 0)
  window.App.RootScope[SelectedItem].Value = window.App.RootScope.MyObjects[SelectedItem];

Doing that you can therefore access to the controls' "Value" variables like always.

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.