-1

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.

Improve this question
3
  • 2
    See stackoverflow.com/questions/929776/… Commented Jul 19, 2011 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. 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. Commented Jul 19, 2011 at 22:19

5 Answers 5

Reset to default
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.

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

3 Comments

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
@user: You're welcome, but can you use 2 Arrays, instead of an Array and an object literal?
Not really, its a task ive been set for my training which i was having problems with .... thanks again
1

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

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

8 Comments

Never leave a for in loop unfiltered.
Forgive me, how does one "filter" a for loop?
@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.
@Pete Herbert Penito: "hasOwnProperty"??
Could you show me how to do it unfiltered? aswell as put inside a <ul>, in seperate <li> .... sorry for being a pain
|
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 ); }
Improve this answer

2 Comments

Isnt .innerHTML jquery? ... I have to specifically use javascript .... sorry its just the way it has been given
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
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.

Improve this answer

3 Comments

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
You got any advice or tips on starting out?
@user844070 If something doesn't work, fix it. Giving up will get you no where.
0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.