create an array and loop through displaying each in HTML

Question

id like to create an array storing:

document title
document summary
document link

and then loop through each entry, displaying each in the html.

so far ive got my array..:

var docs = [
{
    doc-title: "onesider number 1",
    doc-info:    "its onesider number 1",
    doc-src: "link here"
},

{
    doc-title: "Onesider number 2",
    doc-info:    "its onesider number 2",
    doc-src: "link here"
}

];

but after this I have no idea how to loop and display each. any suggestions?

These are not valid objects literals, if you intend to use hyphens in your keys, double quote them : `"doc-title": "onesider number 1"` and then retrieve the values like this : `doc["doc-title"]` instead of `doc.doc-title` which will not work. In my opinion, you should avoid using hyphens, unless you have no choice, use camel case instead. — rayfranco, Jan 23 '13 at 14:10

score 2 · Accepted Answer · edited May 23 '17 at 11:57

You are asking two questions at a time:

how to loop in javascript
how to append data —from that loop— to the DOM

You can check this question about loops in javascript, the each() function in jQuery, also take a look at append, prepend, text, html, attr functions in jQuery documentation.

Here is probably what you are trying to achieve (assuming you are using jQuery) :

var docs = [
    {
        docTitle: "onesider number 1",
        docInfo:    "its onesider number 1",
        docSrc: "link here"
    },
    {
        docTitle: "Onesider number 2",
        docInfo:    "its onesider number 2",
        docSrc: "link here"
    }
],

// This should be your items container  
container = $('#documents');


$.each(docs,function(i,doc){

    // Let's create the DOM
    var item = $('<div>').addClass('item'),
        title = $('<h1>'),
        info = $('<p>'),
        link = $('<a>');

    // Add content to the DOM
    link.attr('href',doc.docSrc)
    .text(doc.docTitle)
    .appendTo(title);

    info.text(doc.docInfo);

    // Append the infos to the item
    item.append(title,info);

    // Append the item to the container
    item.appendTo(container);
});

With this base html :

<div id="documents"></div>

you should end-up with something like :

<div id="documents">
  <div class="item">
    <h1><a href="link here">onesider number 1</a></h1>
    <p>its onesider number 1</p>
  </div>
  <div class="item">
    <h1><a href="link here">onesider number 2</a></h1>
    <p>its onesider number 2</p>
  </div>
</div>

Here is the working jsFiddle

thank you - both answers were right but this gave me everything i needed — rpsep2, Jan 23 '13 at 14:34

score 1 · Answer 2 · answered Jan 23 '13 at 13:47

1

Use $.each to loop all items.

Docs: http://api.jquery.com/jQuery.each/

$.each(docs, function(index, obj){
    $.each(obj, function(key, value){
        alert(key+'=='+value); //manipulate the items here
    })  
})

Demo: http://jsfiddle.net/WypxX/1/

answered Jan 23 '13 at 13:47

Muthu Kumaran

17,682
5
47
70

1

Bravo. Your answer is the first I've seen that shows that two loops are required to loop through an array of objects. Makes sense when I see it, but I could not figure it out. Thanks! – JimB814 Jan 19 '18 at 14:47

create an array and loop through displaying each in HTML

2 Answers2