Loop over an object at set increments of time

Question

I've been looking for an answer to this but the fixes I have found have not helped so figured I would just outright as where im going wrong (like always - any help here is very appreciated)

So I have an array of objects, with reviews and I need it to post a new review on the site each 10 seconds i.e. update the text ect:

I figured I would use:

review = [{
name: 'X',
rating: 'X',
review: 'X'
},

{
name: 'X',
rating: 'X',
review: 'X'
}]

Then update the html of the site using a setTimeout function and for loop (apparently this is not as easy as I had believed) -

function init(){

    var name = document.querySelector('.name');

    for(i=0; i<reviews.length; i++){
        setTimeout(function(){
            name.innerHTML = reviews[i].aditional_info_name;
        },10000)
    }

}

Any input here would really help - I have seen some other posts on this subject but I haven't managed to implement a fixed based on what i have seen thus far.

The issue -

I keep getting:

Thanks in advance, W

Did you check for type review vs reviews? – Roshan Nov 30 '19 at 19:38 — Roshan, Nov 30 '19 at 19:38

Shubham Dixit · Accepted Answer · 2019-12-09T13:35:38.370

let reviews = [{
    name: 'X',
    rating: 'X',
    review: 'OX'
  },

  {
    name: 'X',
    rating: 'X',
    review: 'XL'
  },

  {
    name: 'X',
    rating: 'X',
    review: 'XD'
  },

  {
    name: 'X',
    rating: 'X',
    review: 'XJ'
  },

  {
    name: 'X',
    rating: 'X',
    review: 'HX'
  },

  {
    name: 'X',
    rating: 'X',
    review: 'XG'
  }
]


function init() {

  var name = document.querySelector('.name');

  for (var i = 0; i < reviews.length; i++) {
    (function(index) {
      setTimeout(function() {
        name.innerHTML = reviews[index].review;
      }, index * 1000)
    })(i);
  }

}

init();

<div class="name">

</div>

You should use let or use a closure.Because at the time your set time out get executed the last varaible of loop is left.Also check for variable names its review you have mentioned not reviews

function init(){

    var name = document.querySelector('.name');

    for(let i=0; i<reviews.length; i++){
        setTimeout(function(){
            name.innerHTML = reviews[i].aditional_info_name;
        },i*10000)
    }

}

OR

function init(){

        var name = document.querySelector('.name');

        for(var i=0; i<reviews.length; i++){
           (function(index) {
            setTimeout(function(){
                name.innerHTML = reviews[index].aditional_info_name;
            },index*10000)
            })(i);
        }

    }

Also see this

Thank you for the reply - this does work but not in the intended way. This waits 10 seconds then posts all the items at once - what I was wanting to do was, wait 10 seconds post the first update, wait 10 seconds post the second update ect until finished. any ideas on how to do this would be great — Wally, Nov 30 '19 at 19:45
Amazing stuff dude - very minor change to the structure for my actual code name.innerHTML = reviews[i].aditional_info_name; - but I think this was 100% me not exsplaining it very well. Thank you again for your help (now to study the WHYZZZ of it all) — Wally, Nov 30 '19 at 21:22

score 0 · Answer 2 · answered Nov 30 '19 at 19:37

0

Try replacing function() { with () => {.

answered Nov 30 '19 at 19:37

noɥʇʎԀʎzɐɹƆ

9,967
2
50
67

Loop over an object at set increments of time

2 Answers2