Merging Arrays Using Javascript

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.

See http://stackoverflow.com/questions/929776/merging-associative-arrays-javascript — Russ Clarke, Jul 19 '11 at 22:13
You have an Object and an Array. This will give you troubles because you can't guarantee the order when enumerating the Object. — user113716, Jul 19 '11 at 22:16
@Russ C: Take another look at the question. OP appears to be trying to associate the content of the items in one with the items in the other. — user113716, Jul 19 '11 at 22:19

user113716 · Accepted Answer · 2011-07-19T22:33:42.077

2

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.

edited Jul 19 '11 at 22:33

answered Jul 19 '11 at 22:22

user113716

318,772
63
451
440

Hi there, thats awesome, Is it possible to expand on that and show me how you would contain each statement inside a
which can then be pushed into a

PI.

Jul 19 '11 at 22:30

@user: You're welcome, but can you use 2 Arrays, instead of an Array and an object literal? – user113716 Jul 19 '11 at 22:34

Not really, its a task ive been set for my training which i was having problems with .... thanks again – PI. Jul 19 '11 at 22:38

score 1 · Answer 2 · answered Jul 19 '11 at 22:15

1

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

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

answered Jul 19 '11 at 22:15

ckruse

9,642
1
25
25

2

Never leave a for in loop unfiltered. – McKayla Jul 19 '11 at 22:18
Forgive me, how does one "filter" a for loop? – Doug Molineux Jul 19 '11 at 22:20
@tylermwashburn: Never? Nonsense. If you don't extend `Object.prototype`, then it's not an issue. If you do, then *your code should break* so that you'll learn not to. – user113716 Jul 19 '11 at 22:21
@Pete Herbert Penito: "hasOwnProperty"?? – DrStrangeLove Jul 19 '11 at 22:22
Could you show me how to do it unfiltered? aswell as put inside a
- .... sorry for being a pain
– PI. Jul 19 '11 at 22:23
@patrick Think about built in methods like `toString`, `hasOwnProperty`, etc. And there's nothing wrong with extending the Object prototype. I do it all the time, and it does nothing but benefit me. – McKayla Jul 20 '11 at 00:32
@tylermwashburn: `toString` and `hasOwnProperty` (and the other standard properties) aren't relevant because they're non-enumerable. For personal use, if you're using no other scripts, and you *always* use `hasOwnProperty`, and you *never need* to enumerate the prototype (which is sometimes desired with custom constructors), then sure extend it. But don't recommend it by saying there's nothing wrong with it. It has great potential to cause problems, and it *forces* you to take a performance loss using `hasOwnProperty()` and it makes it *impossible* to enumerate the prototype if needed. – user113716 Jul 20 '11 at 00:59
@DrStrangeLove not sure what your response means, I wasn't being sarcastic, I just wasn't sure of this terminology – Doug Molineux Jul 21 '11 at 20:31

score 0 · Answer 3 · answered Jul 19 '11 at 22:23

0

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

answered Jul 19 '11 at 22:23

xavierm02

8,457
1
20
24

Isnt .innerHTML jquery? ... I have to specifically use javascript .... sorry its just the way it has been given – PI. Jul 19 '11 at 22:25
Nope... innerHTML is a property introduced by IE and is now implemented everywhere even though it is in no specification. https://developer.mozilla.org/en/DOM:element.innerHTML – xavierm02 Jul 20 '11 at 15:43

score 0 · Answer 4 · answered Jul 19 '11 at 22:27

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.

Thanks man .... and only 15 .... im 19 and im just starting out with javascript so i can understand the HTML5 api's abit better .... got a good future man stick at it — PI., Jul 19 '11 at 22:44
@user844070 If something doesn't work, fix it. Giving up will get you no where. — McKayla, Jul 20 '11 at 00:33

score 0 · Answer 5 · answered Jul 19 '11 at 22:37

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>

Merging Arrays Using Javascript

5 Answers5