Как получить последний объект из массива объекта на основе условия в angular 8

Question

У меня есть несколько объектов, которые я получаю один за другим, используя функцию settimeout, а затем каждый раз помещаю их в массив, чтобы заполнить таблицу. Это происходит в моем проекте динамически, но для справки я использую settimeout и жесткое кодирование здесь.

Теперь моя проблема в том, что всякий раз, когда я получаю данные, используя settimeout, мне нужно получить последний объект путем фильтрации с помощью vehicle_number (если он содержит тот же vehicle_number, мне нужно получить последний объект с номером vehicle_number) и мне нужно снова заполнить / pu sh в таблицу. Вот код, который я попробовал.

home.component. html

<div>
<table>
<tr *ngFor="let x of groupList">
<td>{{x.vehicle_number}}</td>
<td>{{x.status}}</td>
</tr>
</table>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
imageSource :any;
statusdata1: any;
vehicle_number:any;
groupList:any = [];

constructor() {}
  ngOnInit() {
     /* First data */
    this.statusdata1 = {"vehicle_number":1,"status":"red"};
     this.groupList.push(this.statusdata1);
     console.log(this.groupList);

     /* second data */
    setTimeout (() => {
        this.statusdata1 = {"vehicle_number":1,"status":"green"};
         this.groupList.push(this.statusdata1);

         console.log(this.groupList);
      }, 5000);
   /* Third data */

      setTimeout (() => {
        this.statusdata1 = {"vehicle_number":2,"status":"yellow"};
         this.groupList.push(this.statusdata1);
         console.log(this.groupList);
      }, 10000);


  }

}

Answer 1

Вы можете написать быструю функцию для обновления значения следующим образом

private updateGroupList(statusData: any) {
  for (const key in this.groupList) {
    if (this.groupList[key].vehicle_number === statusData.vehicle_number) {
      this.groupList[key].status = statusData.status;
      return;
    }
  }
  this.groupList.push(statusData);
}

И вы можете заменить все this.groupList.push() в ngOnInit() на this.updateGroupList(this.statusdata1).

ngOnInit() {
  /* First data */
  this.statusdata1 = {"vehicle_number":1,"status":"red"};
  this.updateGroupList(this.statusdata1);
  console.log(this.groupList);

  /* Second data */
  setTimeout (() => {
    this.statusdata1 = {"vehicle_number":1,"status":"green"};
    this.updateGroupList(this.statusdata1);
    console.log(this.groupList);
  }, 5000);

  /* Third data */
  setTimeout (() => {
    this.statusdata1 = {"vehicle_number":2,"status":"yellow"};
    this.updateGroupList(this.statusdata1);
    console.log(this.groupList);
  }, 10000);
}

Рабочий пример: Stackblitz

Stackblitz GIF