How to get last object from array of object based on condition in angular 8

Question

I have some objects, that I am receiving one after another using settimeout function and then pushing every time into array to populate into a table. That is coming dynamically in my project but just for reference I am using settimeout and hard coding here.

Now my problem is, whenever I am receiving data using settimeout, I need to get last object by filtering with vehicle_number (if it contains same vehicle_number, I need to get last object of that vehicle_number) and need to populate/push into table again. Here is the code I have tried.

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);


  }

}

ruth · Accepted Answer · 2020-03-22T19:27:02.070

0

You could write a quick function to update the value like the following

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);
}

And you could replace all this.groupList.push() in the ngOnInit() with 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);
}

Working example: Stackblitz

Stackblitz GIF

edited Mar 22 '20 at 19:27

answered Mar 22 '20 at 18:58

ruth

29,535
4
30
57

Thanks for your answer, this object is not populating {"vehicle_number":2,"status":"yellow"} , it should also check in same way and populate after first object...so on – anguler-developer Mar 22 '20 at 19:14
It is populating in the stackblitz. As per the settimouts, you need to wait 10 seconds for it to happen. – ruth Mar 22 '20 at 19:15
I've posted a working gif capture of the stackblitz – ruth Mar 22 '20 at 19:27
[**Why is using “for…in” with array iteration a bad idea?**](https://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea) – developer033 Mar 22 '20 at 19:43

How to get last object from array of object based on condition in angular 8

home.component.html

home.component.ts

1 Answers1