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?
You are asking two questions at a time:
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
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
})
})
"doc-title": "onesider number 1"and then retrieve the values like this :doc["doc-title"]instead ofdoc.doc-titlewhich will not work. In my opinion, you should avoid using hyphens, unless you have no choice, use camel case instead.