Merging two arrays concurrently in Angular 7

Question

Merging two arrays concurrently in Angular 7

When attempting to merge two arrays side by side, I followed the procedure below but encountered the following error:

Cannot set Property "account" of undefined.

This is the code in question:

    acs = [
    {
        "account": "Cash In Hand",
        "liabilities": 0,
        "assets": 8031597
    },
    {
        "account": "Tax Acs",
        "liabilities": 988363.72,
        "assets": 0.98
    },
    {
        "account": "Sundry Debtor",
        "liabilities": 0,
        "assets": 551
    },
    {
        "account": "Sundry Creditor",
        "liabilities": 0,
        "assets": 0
    }
];

acd: any;
acc: any;
newacc: any;

constructor() { }

ngOnInit() {
    this.acd = this.acs.filter(f => f.liabilities !== 0);
    this.acc = this.acs.filter(f => f.assets !== 0);

    const bigger = this.acd.length > this.acc.length ? this.acd.length : this.acc.length;

    this.newacc = [];
    for (let i = 0; i < bigger; i++) {
      if (this.acd.length > i) {
        this.newacc[i].account = this.acd[i].account;
        this.newacc[i].liabilities = this.acd[i].liabilities;
      }
      if (this.acc.length > i) {
        this.newacc[i].accounts = this.acc[i].account;
        this.newacc[i].assets = this.acc[i].assets;
      }
    }
  }

Adding this.newacc = [{}]; results in the same error occurring for the second if statement as well - specifically at this.newacc[i].accounts.

What mistake may have been made here? Is there a simpler method to combine these independent arrays side by side, considering their differing lengths and lack of associated data?

javascript angular typescript angular7

Answer 1

Answer №1

To resolve the issue, it is recommended to utilize the push method instead of using C++ syntax. Here is an example:

 this.newacc[i].account = this.acd[i].account;

Instead, you can use the push method and pass the desired object as a parameter like this:

newacc.push({account:acd[i].account, liabilities : acd[i].liabilities });

acs = [ { "account": "Cash In Hand", "liabilities": 0, "assets": 8031597 }, { "account": "Tax Acs", "liabilities": 988363.72, "assets": 0.98 }, { "account": "Sundry Debtor", "liabilities": 0, "assets": 551 }, { "account": "Sundry Creditor", "liabilities": 0, "assets": 0 } ];

acd = acs.filter(f => f.liabilities !== 0);
acc = acs.filter(f => f.assets !== 0);

const bigger = acd.length > acc.length ? acd.length : acc.length, newacc = [];
for (let i = 0; i < bigger; i++) {
  if (acd.length > i)
    newacc.push({account:acd[i].account, liabilities : acd[i].liabilities });
  if (acc.length > i)
    newacc.push({account:acc[i].account, assets : acc[i].assets });
}
console.log(newacc);

Answer 2

To resolve the issue, it is recommended to utilize the push method instead of using C++ syntax. Here is an example:

 this.newacc[i].account = this.acd[i].account;

Instead, you can use the push method and pass the desired object as a parameter like this:

newacc.push({account:acd[i].account, liabilities : acd[i].liabilities });

acs = [ { "account": "Cash In Hand", "liabilities": 0, "assets": 8031597 }, { "account": "Tax Acs", "liabilities": 988363.72, "assets": 0.98 }, { "account": "Sundry Debtor", "liabilities": 0, "assets": 551 }, { "account": "Sundry Creditor", "liabilities": 0, "assets": 0 } ];

acd = acs.filter(f => f.liabilities !== 0);
acc = acs.filter(f => f.assets !== 0);

const bigger = acd.length > acc.length ? acd.length : acc.length, newacc = [];
for (let i = 0; i < bigger; i++) {
  if (acd.length > i)
    newacc.push({account:acd[i].account, liabilities : acd[i].liabilities });
  if (acc.length > i)
    newacc.push({account:acc[i].account, assets : acc[i].assets });
}
console.log(newacc);

Answer 3

Answer №2

Your issue stems from a problem with Typescript, rather than any Angular-related issues.

To address part of your code, here is a solution for you to consider:

interface accnt {
  account: string;
  liabilities: number;
  assets: number;
}

let acs = [
    {
        "account": "Cash In Hand",
        "liabilities": 0,
        "assets": 8031597
    },
    {
        "account": "Tax Acs",
        "liabilities": 988363.72,
        "assets": 0.98
    },
    {
        "account": "Sundry Debtor",
        "liabilities": 0,
        "assets": 551
    },
    {
        "account": "Sundry Creditor",
        "liabilities": 0,
        "assets": 0
    }
];

let acd: accnt[] = new Array(4);
let acc: accnt[] = new Array(4);
let newacc: accnt[] = new Array(4);

this.acd = this.acs.filter(f => f.liabilities !== 0);
this.acc = this.acs.filter(f => f.assets !== 0);
alert(JSON.stringify(this.acd));
alert(JSON.stringify(this.acc));
alert(JSON.stringify(this.newacc));

const bigger = this.acd.length > this.acc.length ? this.acd.length : this.acc.length;

for (let i = 0; i < bigger; i++) {
  if (this.acd.length > i) {
    this.newacc[i] =
      {
        account: this.acd[i].account,
        liabilities: this.acd[i].liabilities
      }
  }
  /*if (this.acc.length > i) {
    this.newacc[i].accounts = this.acc[i].account;
    this.newacc[i].assets = this.acc[i].assets;
  }*/
}

alert(JSON.stringify(this.newacc));

Answer 4

Your issue stems from a problem with Typescript, rather than any Angular-related issues.

To address part of your code, here is a solution for you to consider:

interface accnt {
  account: string;
  liabilities: number;
  assets: number;
}

let acs = [
    {
        "account": "Cash In Hand",
        "liabilities": 0,
        "assets": 8031597
    },
    {
        "account": "Tax Acs",
        "liabilities": 988363.72,
        "assets": 0.98
    },
    {
        "account": "Sundry Debtor",
        "liabilities": 0,
        "assets": 551
    },
    {
        "account": "Sundry Creditor",
        "liabilities": 0,
        "assets": 0
    }
];

let acd: accnt[] = new Array(4);
let acc: accnt[] = new Array(4);
let newacc: accnt[] = new Array(4);

this.acd = this.acs.filter(f => f.liabilities !== 0);
this.acc = this.acs.filter(f => f.assets !== 0);
alert(JSON.stringify(this.acd));
alert(JSON.stringify(this.acc));
alert(JSON.stringify(this.newacc));

const bigger = this.acd.length > this.acc.length ? this.acd.length : this.acc.length;

for (let i = 0; i < bigger; i++) {
  if (this.acd.length > i) {
    this.newacc[i] =
      {
        account: this.acd[i].account,
        liabilities: this.acd[i].liabilities
      }
  }
  /*if (this.acc.length > i) {
    this.newacc[i].accounts = this.acc[i].account;
    this.newacc[i].assets = this.acc[i].assets;
  }*/
}

alert(JSON.stringify(this.newacc));

Merging two arrays concurrently in Angular 7

Answer №1

Answer №2

Similar questions

Sync State with Data from API Query

Nextjs: utilizing static class or employing a use function

Reload the Node.js webpage

What is the best way to take any constructor type and transform it into a function type that can take the same arguments?

What is the best way to retrieve the parameter of ng2-file-upload using endback?

Troubleshooting the issue: Difficulty in activating Navbar dropdown using Angular and ui-router

How to use a string condition to filter a list of objects in Javascript?

Update the icon in real-time based on the text with Angular 8 and Font Awesome, achieving dynamic changes effortlessly

What is causing the groupBy function from rxjs in Angular to malfunction?

Shifting the placement of a component in Vue JS when hovering the mouse

Angular's innerHTML dilemma

How can one check in JavaScript if a specific URL was targeted with a XMLHttpRequest?

What is the best way to verify if an object is an instance of a particular class using Jasmine testing?

How can I retrieve the length of an array in vuejs?

Can the Angular Material Mat Stepper display multiple active/in-progress steps simultaneously?

Customize the initial color of the text field in Material UI

How to toggle two classes simultaneously using JQuery

Issues with using a personalized font in a Stenciljs project

Guide on configuring and executing AngularJS Protractor tests using Jenkins

Guide on darkening the surrounding div of an alert to give it a modal-like effect