Question

I apologise if this question has already been asked on here before but I cant find it.

Im having trouble merging two arrays together and im an absolute beginner with javascript.

I need to do this in pure javascript and not use any library code.

Here is the code;

var greetings = [
  'Hello',
  'Bonjour',
  'Ola',
],

names = {
  'One': 'Bill',
  'Two': 'John',
  'Three': 'Paul',
};

What I would like the result to appear as would be the following in an unordered list as well as each statement being in there own seperate list item;

<ul>
   <li>Hello Bill</li><br/>
   <li>Bonjour John</li><br/>
   <li>Ola Paul</li><br/>
</ul>

If anyone could answer this question, as well as comment the code so I can understand how it works that would be perfect.

Answer 1

You can not guarantee the order of enumeration when using a for-in statement.

As such, you’d need to have a separate array that specifies the order.

var greetings = [
  'Hello',
  'Bonjour',
  'Ola',
],

names = {
  'One': 'Bill',
  'Two': 'John',
  'Three': 'Paul',
},

order = [
   'One',
   'Two',
   'Three'
], 

items = [];

for( var i = 0, len = order.length; i < len; i++ ) {
   items.push( greetings[i] + ' ' + names[ order[i] ] );
}

document.body.innerHTML = ( "<ul><li>" + items.join("</li><li>") + "</li></ul>" );

But this would be a pain. You should use 2 Arrays instead.

Example: http://jsfiddle.net/rktyF/1/

EDIT: I got rid of the <br> since it’s unnecessary.