Loop through an array and Update html elements from array of objects on next() | Sololearn: Learn to code for FREE!
Новый курс! Каждый программист должен знать генеративный ИИ!
Попробуйте бесплатный урок
0

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

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 }

9th Aug 2020, 8:53 AM
PMZ
4 ответов
+ 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']
10th Aug 2020, 4:30 PM
JME
0
What are you trying to do here? Whats variable timeLine? Whats your actual question or where are you stuck?
10th Aug 2020, 1:15 AM
JME
0
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.
10th Aug 2020, 12:56 PM
PMZ
0
Thanks, will try it and update
11th Aug 2020, 11:25 AM
PMZ