I'm looping through an object. The loop is working perfectly fine, but after the number of value comes to zero it's jumping to the next key.
I want after iterating from the each key it should go to next one.
let trackOfReaction = {
heart: 5,
fire: 4,
clap: 0,
wow: 2,
like: 1,
}
setInterval(() => {
for (const [key, value] of Object.entries(trackOfReaction)) {
if (value !== 0) {
trackOfReaction[key] = value - 1
const userReaction = {
reaction: key,
storedReaction: true,
};
console.log(userReaction)
break;
}
}
}, 2000);Below is expected output
Expected output
{
reaction: "heart",
storedReaction: true
},
{
reaction: "fire",
storedReaction: true
},
{
reaction: "wow",
storedReaction: true
},
{
reaction: "like",
storedReaction: true
},
{
reaction: "heart", // here after completing of the first set heart should print again
storedReaction: true
},
{
reaction: "fire",
storedReaction: true
},
{
reaction: "wow",
storedReaction: true
},
{
reaction: "heart", // like became 0 so it not print, loop goes again back to heart
storedReaction: true
},...so on
This works
Note the splice so timeout will no longer take longer as the values turn 0
const trackOfReaction = { heart: 5, fire: 4, clap: 0, wow: 2, like: 1, };
// filter the items so we do not even process "clap"
const arr = Object.entries(trackOfReaction).filter(([key, value]) => value > 0);
let cnt = 0;
let tId = setInterval(() => {
if (cnt >= arr.length) cnt = 0;
const [key, value] = arr[cnt];
if (value === 0) {
// no need to subtract
cnt++
return;
}
const userReaction = { reaction: key, storedReaction: true, value: value };
console.log(userReaction);
arr[cnt][1]--; // count down the entry
if (arr[cnt][1] === 0) arr.splice(cnt,1); // shorten the array
console.log(JSON.stringify(arr))
const cont = arr.reduce((acc, [key, value], i) => { acc += value; return acc; }, 0);
if (cont === 0) { // stop when the array is empty or all values are 0
clearInterval(tId);
console.log("stopped");
return; // stop
}
cnt++; // add one
}, 1000);