Loop through an array and Update html elements from array of objects on next()

Question

Hi guys.

I need some help on jquery and an array of objects.

myArray = [{eventName : "Some text",
eventYear : "",
eventAge : 21,
eventDescription : "",
eventPlace : "",
eventImage : "",
eventAdditionalInfo : "",
},

{eventName : "Marriage Text",
eventYear : "",
eventAge : 23,
eventDescription : "",
eventPlace : "",
eventImage : "",
eventAdditionalInfo : "",
},

{eventName : "Other text",
eventYear : "",
eventAge : 24,
eventDescription : "",
eventPlace : "Some place",
eventImage : "",
eventAdditionalInfo : "",
},
{eventName : "Some more text",
eventYear : "1999",
eventAge : 25,
eventDescription : "",
eventPlace : "",
eventImage : "src url",
eventAdditionalInfo : "",
}
]
// change some bunch of elements on the DOM using ID mapping them to keys in the objects.

function next(){
for ( var i = 0, len = timeLine.length; i < len; i++ ){
document.getElementById('cardTitle').innerHTML = timeLine[i][0].length // probably
document.getElementById('cardText').innerHTML = timeLine
document.getElementById('cardImage').innerHTML = timeLine
}

function back(){
for ( var i = 0, len = timeLine.length; i < len; i-- ){
document.getElementById('cardTitle').innerHTML = timeLine
document.getElementById('cardText').innerHTML = timeLine
document.getElementById('cardImage').innerHTML = timeLine
}

Answer 1

Got it, so you dont want to loop through the array every click.
Create a variable to keep track of the current event being displayed
var pointer = 0.
In next on click increment pointer,
pointer ++,
then set each property based on
myArray[pointer] ['property'].
So setting the title should be done
document.getElementById('cardTitle').innerHTML = myArray[pointer]['eventName']

Answer 2

What are you trying to do here?
Whats variable timeLine?
Whats your actual question or where are you stuck?

Answer 3

Thanks for the response. I am trying to build a timeline but it's in a simple form as a slider with text and image. The html is populated from the array of objects when you click next on the html. Just like a random quote generator only this time it's not random, it takes the next object which has text, some integers and an image. Hope it's clear.

Answer 4

Thanks, will try it and update