Last item in array won't update with ajax request - arrays

Question

I'm building a store dashboard in Angular 5 which shows orders that are in route and orders that have arrived. When a user clicks a button it sets the hasArrived field in the order as true. With the setInterval funciton in the store dashboard component I'm making an API call every second to get the order data and check the filed hasArrived to see if it's true or false. In the dashboard you can see orders move from inRoute to arrived in seemingly real time once this button is clicked. The only problem is when there's only a single order in the inRoute array, even when hasArrived is switched to true, it still displays on the screen in the inRoute orders. Only once you refresh the page does it update into the arrived section.
setInterval(() =>{
this.storeService.getStore(localStorage.getItem('storeId'))
.subscribe((data) => {
console.log(data);
this.store = data;
let ir = [];
let ar = [];
for(let order of data.orders){
if(order.completedPurchase === false){
if(order.hasArrived === false){
ir.push(order);
this.inRoute = ir;
}
if(order.hasArrived == true){
ar.push(order);
this.here = ar;
}
}
}
}),
error => console.log(error);
}, 1000);

Answer 1

try the following code:
setInterval(() => {
this.storeService.getStore(localStorage.getItem('storeId'))
.subscribe((data) => {
console.log(data);
this.store = data; // do you need this?
this.inRoute = [];
this.here = [];
(data.orders || []).forEach((order) => {
if (!order.completedPurchase) {
if (order.hasArrived) {
this.here.push(order);
} else {
this.inRoute.push(order);
}
}
});
}),
error => console.log(error);
}, 1000);
In short, I guess the root cause is that you do not reassign this.inRoute when its single item changes hasArrived from false to true.
I have tried to keep as much untouched as I could, but there some areas to think about:
try use setTimeout: fetch orders every second after the previous data arrived
do not forget to clean-up: call either clearInterval/clearTimeout when the component is being destroyed
I guess there could be a solution with rx-js, but I am not familiar with it..