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.

You have an Object and an Array. This will give you troubles because you can't guarantee the order when enumerating the Object. — user113716
– user113716, Commented Jul 19, 2011 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
– user113716, Commented Jul 19, 2011 at 22:19

user113716 · Accepted Answer · 2011-07-19 22:33:42Z

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, 2011 at 22:33

answered Jul 19, 2011 at 22:22

user113716

323k64 gold badges454 silver badges441 bronze badges

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

3 Comments

PI. Over a year ago

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

user113716 Over a year ago

@user: You're welcome, but can you use 2 Arrays, instead of an Array and an object literal?

PI. Over a year ago

Not really, its a task ive been set for my training which i was having problems with .... thanks again

ckruse · Accepted Answer · 2011-07-19 22:15:22Z

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, 2011 at 22:15

ckruse

9,7701 gold badge27 silver badges25 bronze badges

8 Comments

McKayla Over a year ago

Never leave a for in loop unfiltered.

Doug Molineux Over a year ago

Forgive me, how does one "filter" a for loop?

user113716 Over a year ago

@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.

DrStrangeLove Over a year ago

@Pete Herbert Penito: "hasOwnProperty"??

PI. Over a year ago

Could you show me how to do it unfiltered? aswell as put inside a <ul>, in seperate <li> .... sorry for being a pain

|

xavierm02 · Accepted Answer · 2011-07-19 22:23:39Z

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, 2011 at 22:23

xavierm02

8,8071 gold badge22 silver badges25 bronze badges

2 Comments

PI. Over a year ago

Isnt .innerHTML jquery? ... I have to specifically use javascript .... sorry its just the way it has been given

xavierm02 Over a year ago

Nope... innerHTML is a property introduced by IE and is now implemented everywhere even though it is in no specification. developer.mozilla.org/en/DOM:element.innerHTML

McKayla · Accepted Answer · 2011-07-19 22:27:44Z

0

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.

answered Jul 19, 2011 at 22:27

McKayla

6,9896 gold badges39 silver badges50 bronze badges

3 Comments

PI. Over a year ago

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

You got any advice or tips on starting out?

McKayla Over a year ago

@user844070 If something doesn't work, fix it. Giving up will get you no where.

Wayne · Accepted Answer · 2011-07-19 22:37:34Z

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>

Collectives™ on Stack Overflow

Merging Arrays Using Javascript

5 Answers 5

3 Comments

8 Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

8 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related