CODEWITHSUNDEEP
javascript
RedNaxel
RedNaxel

Reputation: 452

Iterate over object's property

I have an array of objects. Each object has a title and a link.

[Object { title="Do it", reslink="http://img-9gag-ftw.9cac.../photo/a5PrnLE_460s.jpg"},
Object { title="\n \n ...le \n ", reslink="http://img-9gag-ftw.9cac.../photo/aE17NWG_460s.jpg"}, 
Object { title="\n \n ...es \n ", reslink="http://img-9gag-ftw.9cac...oto/a2Y5RqD_460s_v1.jpg"}]

I need to:

  1. create an element on the page for each title and
  2. create an element for each reslink

What is the easiest way to accomplish that?

Upvotes: 0

Views: 56

Answers (5)

undefined
undefined

Reputation: 4135

Here is a demo of what I think you are trying to accomplish.

JavaScript

NineGagPosts = [{
    title: "Can't be the only one",
    reslink: "http://img-9gag-ftw.9cache.com/photo/avgPd9n_700b_v1.jpg"
}, {
    title: "This a**hole",
    reslink: "http://img-9gag-ftw.9cache.com/photo/aqNLejQ_700b.jpg"
}, {
    title: "She looks fun",
    reslink: "http://img-9gag-ftw.9cache.com/photo/a2Y5K2E_700b_v1.jpg"
}];

window.addEventListener("load", readPosts);

function readPosts() {

    for (var i = 0, l = NineGagPosts.length; i < l; i++) {
        var post = NineGagPosts[i];
        var title = document.createElement("h1");
        var image = new Image();
        title.innerHTML = post.title;
        image.src = post.reslink;
        image.width = 250;
        document.body.appendChild(title);
        document.body.appendChild(image);
    }

}

When the page loads (to access document.body) we call the readPosts() function, which will iterate over all the posts and create a <h1> element for the title and a <img> element for the actual post image, and then append them to the <body>.

Hope this helps!

Upvotes: 0

Fazi
Fazi

Reputation: 3989

Use a for loop to iterate over them. Then user jQuery's functions(append, prepend, and so on...) to insert new elements.

I am not exactly sure what you are trying to create, but here goes... Example: 

for(var i=0; i < list.length; i++)
{
   var titleElement = "<title>" + list[i].title + "</title>";
   var linkElement = "<a href=" + list[i].reslink +">" + list[i].title + "</a>";
   $('#whereToInsertSelector').append(titleElement);
   $('#whereToInsertSelector2').append(linkElement);
}

Upvotes: 0

Guffa
Guffa

Reputation: 700810

You can use the map method to create an element for each array item.

This for example would create an array of links that has the title property as text and the reslink property as href:

var links = $.map(objects, function(o){
  return $('<a>', { href: o.reslink }).text(o.title)[0];
});

The result is an array of elements, that you can for example append in the page:

$('#someElement').append(links);

Upvotes: 1

meskobalazs
meskobalazs

Reputation: 16041

Not necessarily the easiest (shortest) way, but using the DOM API can be much cleaner (and potentially faster) than hacking around with innerHTML and the like.

My solution:

for (var i = 0; i < array.length; i++) {
    var header = document.createElement('h1');
    header.textContent = array[i].title;
    // append the DOM element to another element (maybe to body)
    document.body.appendChild(header);

    var link = document.createElement('a');
    link.setAttribute('href', array[i].reslink);
    // append the DOM element
    document.body.appendChild(link);
}

Probably you don't want to append it to the end of the body, but you get the idea. If you want to append it to somewhere else, use #getElementById() or #querySelector() to find the parent element, and append it there instead.

Upvotes: 0

Martin Folkeseth
Martin Folkeseth

Reputation: 317

Something like this?

for(var i in objects){
  var h1 = '<h1>' + objects[i].title + '</h1>';
  var href = '<a href="' + objects[i].reslink + '">linkText</a>';
}

Upvotes: 1

Related Questions