JavaScript object properties - connect them together?

Question

I have 3 objects in an array.

myArray = [
{name: "iPhone", link: "www.apple.com"},
{name: "Nokia", link: "www.nokia.com"},
{name: "Google", link: "www.Google.com"}
]

How to make a loop and put properties together to display on page, like this:

iPhone Nokia Google

And have links when you click on them

Thanks!

Let's start with *"How to make a loop..."*. Do you know how to do that yet, or are you just starting out? — , May 09 '13 at 14:07
Sorry, I've modified the question. I want to make links. Please take a look. Thanks Bergi. — Ben Delton, May 09 '13 at 14:25
Please try to show what you've done so far, and explain in detail where you're stuck. As far as anyone knows, you're an absolute beginner that doesn't even know how to make a loop, or access properties of an object. We like to help people that are trying but stuck. We don't like so much for StackOverflow to be seen as a free code service. — , May 09 '13 at 16:16

Karl-André Gagnon · Answer 1 · 2013-05-09T19:38:03.457

1

With pure JS, it would be like that :

for(var i=0;i<myArray.length;i++){
    var a = document.createElement('a');
    a.href= myArray[i].link;
    a.text= myArray[i].name;
    document.body.appendChild(a);
}

But it is much easier with jQuery:

You can use jQuery .each(). It will loop through your array and you can access object properties with this.

To make a link, you create a a element and assing his value with .attr() and .text()

$.each(myArray, function(){
    var a = $('<a/>'); //The element itself
    a.attr('href', this.link) //The HREF
    a.text(this.name) //The text
    $('body').append(a) //Append to the body
})

edited May 09 '13 at 19:38

answered May 09 '13 at 14:05

Karl-André Gagnon

32,531
5
47
70

1

I think it would be better to use jQuery's generic iterator `$.each()` instead of passing an Array of objects to the jQuery constructor. – May 09 '13 at 14:08
2

And it would be better not to recommend jQuery iteration to a newbie who doesn't know loops or property accessing. – Bergi May 09 '13 at 14:11
Hmm i though that was no diference between those 2 methods except that with `$(x).each` you couldnt pass an object but with `$.each` you could. – Karl-André Gagnon May 09 '13 at 14:12
@Bergi then why tag this question as jQuery? – Karl-André Gagnon May 09 '13 at 14:12
@Karl-AndréGagnon: It *may* work, but according to the docs, the only support for passing an Array to the jQuery function is when it's an Array of DOM elements. Better to stick with the doc supported syntax. – May 09 '13 at 14:13
...but I agree with @Bergi, since this is a terribly simple task, and the question doesn't demonstrate any knowledge of any part of the problem, I think it would be better to teach fundamental syntax before abstractions. But that may just be an issue with OP not bothering to try anything first. – May 09 '13 at 14:15
Sorry, I've modified the question. I want to make links. Please take a look. Thanks. – Ben Delton May 09 '13 at 14:21
@Karl-AndréGagnon: It does contain the tag to indicate that the OP is using jQuery. But that doesn't make it the right tool for this, and he has not asked explicitly for it :-) – Bergi May 09 '13 at 14:30
I am still new to this forum so i have no "judgment" of the tool he use. i just answer the question and explain :S . Anyway, Edited my answer for what he really need, but with jquery again cause he know how to loop!. – Karl-André Gagnon May 09 '13 at 14:32

Sam · Answer 2 · 2013-05-10T13:50:21.893

0

You could do something like this:

myArray = [
           {name: "iPhone", link: "www.apple.com"},
           {name: "Nokia", link: "www.nokia.com"},
           {name: "Google", link: "www.Google.com"}
         ];
var myDiv = '<div>';
for(var i=0;i<myArray.length;i++){
    myDiv= myDiv+ '<a href=\"'+myArray[i].link+'\">'+myArray[i].name +'</a><br/>';
}
myDiv = myDiv + '</div>';
$('#someDiv').append(myDiv); // append it to some other div

enjoy!

edited May 10 '13 at 13:50

answered May 09 '13 at 14:08

Sam

1,259
2
20
44

1

`document.write`? [That's bad](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice), no... seriously: It's truly utterly [evil](http://www.stefanoforenza.com/documentwrite-is-evil-really/). Just don't do that – Elias Van Ootegem May 10 '13 at 13:02
didn't know document.write was so bad. Replaced it. Thanks for the enlightenment!! – Sam May 10 '13 at 13:52

Bergi · Answer 3 · 2013-05-09T14:30:58.367

0

a loop and put properties together to display on page

Sounds like you want to create an html string:

var list = "<ul>";
for (var i=0; i<myArray.length; i++) {
    list += "<li><a href='"+myArray[i].link+"'>"+myArray[i].name+"</a></li>";
}
list += "</ul>";
$("body").html(list); // or something

edited May 09 '13 at 14:30

answered May 09 '13 at 14:10

Bergi

513,640
108
821
1,164

Sorry, I've modified the question. I want to make links. Please take a look. Thanks. – Ben Delton May 09 '13 at 14:22
You didn't read my answer, did you? It does make links. Or did you want to comment on sameer's one? – Bergi May 09 '13 at 14:28
Great, I just saw it thanks @Bergi !!!! – Ben Delton May 09 '13 at 14:29
Do you also know how to make, that when I click on "iPhone" a new "div" shows up with "www.apple.com" inside. (with jquery) – Ben Delton May 09 '13 at 15:30
Yes, it's fairly simple. What have you tried? Ask another question, and provide your code that does not work. – Bergi May 09 '13 at 16:11
You're right. I'm working on it and will show later. – Ben Delton May 09 '13 at 16:47
Bergi, here's my code I've put inside "for". But only shows last item (www.Google.com) when I click on iPhone, Nokia or Google. Why does not show www.apple.com or www.nokia.com when I click on "iPhone" and "Nokia". new_info = myArray[i].link $(this).click(function() { $('#box2').fadeIn(1000).text(new_info) }); – Ben Delton May 09 '13 at 17:43
I had expected that. See http://stackoverflow.com/q/750486/1048572 – Bergi May 09 '13 at 18:46
Bergi, I don't get it. Please show it on my example. I'll understand better that way. – Ben Delton May 09 '13 at 19:53
`(function(new_info) { $(this).click(function(){$('#box2').fadeIn(1000).text(new_info);}); }).call(this, myArray[i])` – Bergi May 09 '13 at 20:04
It's not working, but I kinda understand better now. Thanks Bergi. – Ben Delton May 09 '13 at 20:22
Bergi, it looks logical to work but doesn't. Can I send you my whole code? – Ben Delton May 09 '13 at 21:52
I don't know what you expect `this` to be? As it stands, you also probably want `.text(new_info.link)` – Bergi May 09 '13 at 22:38

JavaScript object properties - connect them together?

3 Answers3

Linked