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
– Brett Weber

2014-09-05 00:49:50 +00:00
Commented Sep 5, 2014 at 0:49 — Brett Weber
– Brett Weber, Commented Sep 5, 2014 at 0:49

masum7 · Accepted Answer · 2014-09-05 01:07:43Z

1

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);

answered Sep 5, 2014 at 1:07

masum7

8326 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:29:29Z

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, 2017 at 12:29

CommunityBot

11 silver badge

answered Sep 5, 2014 at 1:00

Brett Weber

1,90718 silver badges23 bronze badges

3 Comments

marksealey Over a year ago

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?

Brett Weber Over a year ago

Yeah, but with this object you can loop through the items in it if you need to by doing a for.. in 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 Over a year ago

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.

GitaarLAB · Accepted Answer · 2014-09-07 00:02:57Z

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 7, 2014 at 0:02

GitaarLAB

14.7k12 gold badges62 silver badges83 bronze badges

answered Sep 5, 2014 at 0:59

masum7

8326 silver badges17 bronze badges

13 Comments

marksealey Over a year ago

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?

masum7 Over a year ago

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 Over a year ago

Also check the other answer that I have given.. the total dynamic one. That one is better

marksealey Over a year ago

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?

user663031 Over a year ago

Constructing variable names is a horrible idea, and entirely unnecessary.

|

Collectives™ on Stack Overflow

JavaScript: Assigning values from one array to variables in another

3 Answers 3

Comments

3 Comments

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related