JavaScript: Assigning values from one array to variables in another

Question

I want to populate a series of strings (beijingString, belingString etc) with values from an array ('contentStrings'); so as not to have to do:

beijingString = 'five strings';
berlinString = 'similar but different five strings';
bronxString = 'also similar but different five strings';
buenosairesString = 'similar again but subtly different five strings';

In the end I have 40 such strings to populate.

I tried putting the cities' string variable names into a second array ('cities') and looping through, assigning indexed values.

But it does not work.

Do I have to 'reference' (?) each variable as an element of the 'cities' array in some way, please?

TIA!

Full code snippet:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script>
        var beijingContentString = '';
        var berlinContentString = '';
        var bronxContentString = '';
        var buenos_airesContentString = '';
        var contentStrings = [
            ['http://www.beijing.com',
            'Beijing title',
            '<img src="./images/beijing.jpg">',
            'Beijing caption',
            'Beijing description'
            ],
            ['http://www.berlin.com',
            'Berlin title',
            '<img src="./images/berlin.jpg">',
            'Berlin caption',
            'Berlin description'
            ],
            ['http://www.bronx.com',
            'Bronx title',
            '<img src="./images/Bronx.jpg">',
            'Bronx caption',
            'Bronx description'
            ],
            ['http://www.buenosaires.com',
            'Buenos Aires title',
            '<img src="./images/Buenos Aires.jpg">',
            'Buenos Aires caption',
            'Buenos Aires description'
            ]
        ];

var beijingString = '';
var berlinString = '';
var bronxString = '';
var bueonosairesString = '';

alert ('before: ' + beijingString);
alert ('before: ' + berlinString);
alert ('before: ' + bronxString);
alert ('before: ' + bueonosairesString);

var cities = [beijingString, berlinString, bronxString, bueonosairesString];
var contentArrayLoop = 0;
for (contentArrayLoop = 0; contentArrayLoop < 4; contentArrayLoop++) {
    cities[contentArrayLoop]=
                            contentStrings[contentArrayLoop][0] +
                            contentStrings[contentArrayLoop][1] +
                            contentStrings[contentArrayLoop][2] +
                            contentStrings[contentArrayLoop][3] +
                            contentStrings[contentArrayLoop][4]
    ;
alert(cities[contentArrayLoop]);
};

alert ('after: ' + beijingString);
alert ('after: ' + berlinString);
alert ('after: ' + bronxString);
alert ('after: ' + bueonosairesString);

</script>
</body>
</html>

Could you turn this into an object? – Brett Weber Sep 05 '14 at 00:49 — Brett Weber, Sep 05 '14 at 00:49

score 1 · Accepted Answer · answered Sep 05 '14 at 01:07

A far better example is here: http://jsfiddle.net/L1dpt0bs/1/

You don't need to use any static array for cities.

var contentArrayLoop = 0;

for (contentArrayLoop = 0; contentArrayLoop < 4; contentArrayLoop++) {
     var city = contentStrings[contentArrayLoop][1]
     city = city.substring(0, city.indexOf(' '));
     window[city + 'string'] = contentStrings[contentArrayLoop].join('');
};

alert ('after: ' + Beijingstring);
alert ('after: ' + Berlinstring);
alert ('after: ' + Bronxstring);
alert ('after: ' + Bueonosairesstring);

score 0 · Answer 2 · edited Sep 07 '14 at 00:02

0

You can use concept of dynamic variable

var cities = ['beijing', 'berlin', 'bronx', 'bueonosaires'];
var contentArrayLoop = 0;
for (contentArrayLoop = 0; contentArrayLoop < 4; contentArrayLoop++) {
    window[cities[contentArrayLoop] + 'string'] =

                        contentStrings[contentArrayLoop][0] +
                        contentStrings[contentArrayLoop][1] +
                        contentStrings[contentArrayLoop][2] +
                        contentStrings[contentArrayLoop][3] +
                        contentStrings[contentArrayLoop][4]
;

};

   alert ('after: ' + beijingstring);
   alert ('after: ' + berlinstring);
   alert ('after: ' + bronxstring);
   alert ('after: ' + bueonosairesstring);

Full code is here:

http://jsfiddle.net/m745odgf/

edited Sep 07 '14 at 00:02

GitaarLAB

14,536
11
60
80

answered Sep 05 '14 at 00:59

masum7

822
6
17

masum7, Thanks! In each of the two examples you kindly give, is it possible to avoid the _window[]_ part: I just want to populate those variables - and not really display them… that comes later in my code? – marksealey Sep 05 '14 at 02:07
For assignment you need to use that.. But when you will use it you don't need to use window.. this is just one time.. – masum7 Sep 05 '14 at 02:11
Also check the other answer that I have given.. the total dynamic one. That one is better – masum7 Sep 05 '14 at 02:12
masum7, thanks! I do get this error _ReferenceError: BueonosaireString is not defined_. Am I right that the line with the _city =…_ assignment is reading strings from the _contentStrings_ array to build those variable names? – marksealey Sep 05 '14 at 03:10
Constructing variable names is a horrible idea, and entirely unnecessary. – Sep 05 '14 at 04:01
torzaburo, thanks; but how should I do what I want to do, then? – marksealey Sep 05 '14 at 04:09
marksealey You need to use Bueonosairestring (not BueonosaireString ) – masum7 Sep 05 '14 at 04:14
I want to avoid 40 assignments with only minor variations: var beijingContentString = 'http://www.beijing.com' + 'Beijing title' + '' + 'Beijing caption' + 'Beijing description'; var berlinContentString = 'http://www.berlin.com' + 'Berlin title' + '' + 'Berlin caption' + 'Berlin description'; var bronxContentString = 'http://www.bronx.com' + 'Bronx title' + '' + 'Bronx caption' + 'Bronx description'; with the same CSS embedded in each of those strings. – marksealey Sep 05 '14 at 04:20
> You need to use Bueonosairestring (not BueonosaireString ) Yes. Thanks. I fixed that. And now see how you're deriving the city string. Thanks. – marksealey Sep 05 '14 at 04:21
Did you check my other answer? That is much much better than this. – masum7 Sep 05 '14 at 04:25
Also please mark as answer or up arrow if it is helpful to you – masum7 Sep 05 '14 at 04:25
masum7, I don't yet have the reputation to UpArrow :-( The code I've been experimenting with is at http://jsfiddle.net/L1dpt0bs/1/ – marksealey Sep 05 '14 at 04:30
masum7, thanks; it helps. But it does have the restriction of taking an existing string literal and reusing it to construct a variable, doesn't it. Any way of avoiding 40 successive assignments is helpful! – marksealey Sep 05 '14 at 04:34

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

This isn't all of your data, but this is a format you could use to access the information easily:

var oContentObj = 
{
   buenos_airesContent : 
   {
      url        : 'http://www.buenosaires.com',
      title      : 'Buenos Aires title',
      img        : '<img src="./images/Buenos Aires.jpg">',
      caption    : 'Buenos Aires caption',
      dsc        : 'Buenos Aires description'
   }
}

To loop through the properties of that object, use a for.. in loop :

   for (var oCity in oContentObj)
   {
      // now you have a loop of the cities.. do stuff
      for (var oProp in oCity)
      { 
      // Now you have the properties of the city.. do more stuff
      }
   }

Or you could call the properties directly

oContentObj["CityName"]["CityProp"];
// or
oContentObj.CityName.CityProp;

And for a bigger picture on handling that data on the client,

that object can become much more than a container.

It can control handling that data as well. Containing, displaying, modifying and transporting if needed. :D

edited May 23 '17 at 12:29

Community

1
1

answered Sep 05 '14 at 01:00

Brett Weber

1,839
18
22

Brett, Thanks! I did think about an object like that. Could I still loop through data to populate successive objects without lines and lines of individual assignments? – marksealey Sep 05 '14 at 02:10
Yeah, but with this object you can loop through the items in it if you need to by doing a [for.. in](http://stackoverflow.com/questions/684672/loop-through-javascript-object) loop or you can call properties by nae if you need to do that. I like it better than an array, anyday. At that point you can even start putting functions on the object and making it control itself, giving you the data you want and modifying or displaying it even return you a list of properties or values. – Brett Weber Sep 05 '14 at 03:18
[This is my pattern for handling specific javascript modules. It isn't perfect yet, but the organization works well for handling client functionality in just about any shape.](http://stackoverflow.com/questions/3750082/javascript-oop-best-practices/13074081#13074081) – Brett Weber Sep 05 '14 at 03:21

JavaScript: Assigning values from one array to variables in another

3 Answers3