Javascript array - merge two arrays into one

Question

I have two arrays, one with name of the country and one with the currency type. I would like to merge these together and use the country key instead of the currencies array. What would be the best way to accomplish this?

This is what my code looks like now:

var country = new Array();
country["SEK"] = 'Sweden';
country["USD"] = 'United states';
var currencies = ["SEK","USD"];
var options = '';

for (var i = 0; i < currencies.length; i++) {
    options += '<option value="' + currencies[i] + '" id="' + currencies[i] + '">' + currencies[i] + ' (' + country[currencies[i]] + ')</option>';
}

Don't use string keys with arrays. Use an object instead.

Felix Kling
– Felix Kling

2012-11-21 11:07:37 +00:00
Commented Nov 21, 2012 at 11:07 — Felix Kling
– Felix Kling, Commented Nov 21, 2012 at 11:07
Side note use var country = [] instead new Array()

Bakudan
– Bakudan

2012-11-21 12:04:08 +00:00
Commented Nov 21, 2012 at 12:04 — Bakudan
– Bakudan, Commented Nov 21, 2012 at 12:04

raina77ow · Accepted Answer · 2012-11-21 11:25:22Z

3

It's a common misconception that you can just use this:

for (var currency in country) {
  result += { ... something done with both currency and country[currency] ... };
}

The catch here is that hash is technically unordered in JS, so you cannot guarantee the same order of these options.

The common alternative is using array of objects instead:

var countriesData = [
{
  country: 'Sweden',
  currency: 'SEK'
},
{
  country: 'United States',
  currency: 'USD'
}
];
for (var i = 0, l = countriesData.length; i < l; i++) {
  result += { something of countriesData[i].currency and countriesData[i].country };
}

As a sidenote, consider this...

var country = new Array();
country["SEK"] = 'Sweden';
country["USD"] = 'United states';
console.log(country.length); // wait, what?

... and 0 will be logged, not 2 - as probably expected. Again, there's no such thing as 'PHP-like associative array' in JS: there are objects and arrays (which are technically objects too; typeof country will give you 'object' string).

So this is what happens here: you create an Array object, and it inherits all the properties of Array.prototype (such as length), in particular. Now you extend this Array with two properties - 'SEK' and 'USD'; but it's not the same as pushing these strings into array with push or some similar methods! That's why its length stays the same, introducing chaos and confusion. )

edited Nov 21, 2012 at 11:25

answered Nov 21, 2012 at 10:54

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

2 Comments

Armin Over a year ago

currency: 'SEK'} <- the closing bracket is too much

Amberlamps Over a year ago

Ordering was no requirement :)

Amberlamps · Accepted Answer · 2012-11-21 10:50:47Z

2

Try this:

var countries = {
    'Sweden': 'SEK',
    'United Stated': 'USD'
}, options = '', country;

for(country in countries) {
    options += '<option value="' + countries[country] + '" id="' + countries[country] + '">' + countries[country] + ' (' + country + ')</option>';
}

answered Nov 21, 2012 at 10:50

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

Comments

Bakudan · Accepted Answer · 2012-11-22 09:37:13Z

1

It seem uncomfortable to use arrays. Use json object ^json.org ^wikipedia instead, this way you can take advantage of the relation key-value. In addition you can also validate it with lint. No jQuery needed. So this is the code:

var currency = {
    "SEK": "Sweden",
    "USD": "United states",
    "GBP": "United Kingdom"
};

(function(obj) {
    var myselect = document.getElementById("currency");
    for (var key in obj) {
        var optElement = new Option( key+ " ( " + obj[key] + " ) ", key );
        optElement.id = key; //optElement.setAttribute ( "id", key);
        myselect.add ( optElement, null);
    }
})(currency);

As for the function - I think it is better to do it with objects, instead of making a string and then adding it to the select. It is an anonymous function, so it is self-contained and won't interfere with any other code. Just use it after the select is created, or place it at the end of the page.

And jsfiddle example

Edit:

Using add() or innerHTML - in Chrome, innerHTML is not working. And it is better this way.

As for the removing of the options - there is remove() method. Use one of those:

var x = document.getElementById("currency");
for ( var i = x.length; i > 0; i-- ) { x.remove ( 0 ); }

or

while ( x.length > 0 )               { x.remove ( x.length - 1 ); }

edited Nov 22, 2012 at 9:37

answered Nov 21, 2012 at 11:44

Bakudan

19.5k9 gold badges56 silver badges76 bronze badges

2 Comments

estrar Over a year ago

This looks good. Is there a nice way to clear the list before adding new options?

estrar Over a year ago

I guess myselect.innerHTML = ''; would do it.

Collectives™ on Stack Overflow

Javascript array - merge two arrays into one

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related