Create Array from objects in angular js

Question

I am new in this framework. I want to convert objects into array in angular 8. But I don't get how this work.

Actually, I want to display multiple sales transactions of the a customer with status false. So, somehow I get the values of those transaction made by the same customer as a separate different objects. Now, I want to convert those objects into a single array so that I can iterate them in html file through *ngFor.

  export class InvoicesComponent implements OnInit {

  displayedColumns: string[] = ['ProductName', 'CustomerName', 'Quantity', 
  'Rate', 'Total'];
  id;
  dataSource;


  salesTransaction: SalesTransactionElement[];
  constructor(private service: SalesTransactionsService,
          private route: ActivatedRoute) 
  { }

ngOnInit() {

this.id = this.route.snapshot.paramMap.get('id');

this.service.getSalesTransaction(this.id).subscribe((singleData: any) =>
{
  this.service.getAllSalesTransactions().subscribe((data: any) => 
  {
    data.forEach(element => 
     {

      if (singleData.CustomerName === element.CustomerName && 
      element.Status === false) {

        this.salesTransaction = element;
        console.log(this.salesTransaction);
      }

    });
  });
}

Actual Results:

/*****Separately as two objects****/

{SalesTranId: 54, ProductId: 10, CustomerId: 21, InvoiceId: null, ProductName: "Asus"}

{SalesTranId: 51, ProductId: 17, CustomerId: 21, InvoiceId: 1, ProductName: "Dell"}

Expected Results:

/**********Array of Objects************/

[{SalesTranId: 54, ProductId: 10, CustomerId: 21, InvoiceId: null, ProductName: "Asus"},

{SalesTranId: 51, ProductId: 17, CustomerId: 21, InvoiceId: 1, ProductName: "Dell"}]

This has nothing to do with Angular / AngularJs, you should remove those tags. It's just about array handling in Javascript. — Torben Schramme
– Torben Schramme, Commented Oct 16, 2019 at 16:03
Initialize salesTransaction variable with an empty array [ ] and instead of assigning i.e. this.salesTransaction = element , try this.salesTransaction.push(element). Also it's a bad practice to subscribe inside a subscribe, you try using RxJs operator methods "flatMap" or "forkJoin" according to your use case. — Suvendu
– Suvendu, Commented Oct 16, 2019 at 16:03

Torben Schramme · Accepted Answer · 2019-10-16 16:00:41Z

1

Initialize the array above the constructor: salesTransaction: SalesTransactionElement[] = []

Then push into that array in your forEach handler: this.salesTransaction.push(element);

answered Oct 16, 2019 at 16:00

Torben Schramme

2,1501 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maximiliano Escobar · Accepted Answer · 2019-10-16 16:04:16Z

Actually you are assigned an object in your array definition of SalesTransactionElement[] so you need to push a SalesTransactionElement.

export class InvoicesComponent implements OnInit {

  displayedColumns: string[] = ['ProductName', 'CustomerName', 'Quantity', 
  'Rate', 'Total'];
  id;
  dataSource;


  salesTransaction: SalesTransactionElement[];
  constructor(private service: SalesTransactionsService,
          private route: ActivatedRoute) 
  { }

ngOnInit() {

this.id = this.route.snapshot.paramMap.get('id');

this.service.getSalesTransaction(this.id).subscribe((singleData: any) =>
{
  this.service.getAllSalesTransactions().subscribe((data: any) => 
  {
    data.forEach(element => 
     {

      if (singleData.CustomerName === element.CustomerName && 
      element.Status === false) {

        this.salesTransaction.push(element);
      }

    });
  });
}

Collectives™ on Stack Overflow

Create Array from objects in angular js

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related