Merging Arrays Using Javascript

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&开发者_StackOverflowlt;/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.

---

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.

---

Use for … in, e.g. as follows:

var i = 0, lst = [];
for(pos in names) {
  lst.push(greetings[i++] + " " + names[pos]);
}

---

I don't get the point of { 'One': 'Bill', 'Two': 'John', 'Three': 'Paul', }... Why not [ 'Bill', 'John', 'Paul' ] ?

If you do it that way, it would be :

var ul = document.createElement( 'ul' ),
li;
for ( var i = 0, l = greetings.length; i < l; ++i ) {
    li = document.createElement( 'li' );
    li.innerHTML = greetings[ i ] + ' ' + names[ i ];
    ul.appendChild( li );
}

---

I'm hoping that you mean..

names = ['Bill', 'John', 'Paul'];

..because the names you show in your question isn't an array. It's an object.

Also, for future reference, Array's start at 0, not 1, so..

names[1];

..would be John, even though Bill is first.

var i = 0, // Arrays start at 0.
    ul = document.createElement('ul'), // Create the unordered list.
    greetings = [ 'Hello', 'Bonjour', 'Ola' ], // Make some greetings.
    names = [ 'Bill', 'John', 'Paul' ]; // Make some names.

for (; i < names.length; i++) {
    var li = document.createElement('li'); // Create a list item.

    li.innerHTML = greetings[i] + ' ' + names[i]; // Set the HTML.

    ul.appendChild(li); // Make the list item part of the list.
};

document.body.appendChild(ul); // Put the list inside the body of the document.

That should work.

I have a demo set up here.

---

Seems @patrick beat me to the general solution, but I'll just leave this here anyway:

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

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

var words = ["One", "Two", "Three", "Four", "Five", 
             "Six", "Seven", "Eight", "Nine"];
var i, greet;
var ul = document.createElement("ul");
for (i = 0; greet = greetings[i++];) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(
        greet + " " + names[words[i]]))
    ul.appendChild(li);
}

You can now insert ul into the appropriate position in the DOM. Its structure:

<ul>
    <li>Hello John</li>
    <li>Bonjour Paul</li>
    <li>Ola undefined</li>
</ul>