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

Is the behavior of a function with synchronous AJAX (XMLHttpRequest) call in JavaScript (Vanilla, without jQuery) the same as asynchronous?

Angular is unable to load additional routes

Location of Ajax callback function

Tips for moving an element to the end of an array

Understanding Pass by Reference within Objects through Extend in Javascript with underscore.js Library

Ways to prompt the debugger to pause whenever a specific script file is called during execution in Edge/Chrome debugger

Executing multiple server-side methods on an AJAX call in ASP.NET MVC: A comprehensive guide

Implementing the OnClick method for the button component

"Enhancing the user experience: Triggering a window resize event in jQuery before page load on Magento

Angular Testing: Simplify module setup by using Testbed in each test suite

What is the correct way to properly deploy Nuxt.js in SPA mode on a server?

Is it possible to use next.js to statically render dynamic pages without the data being available during the build process?

Angular directive specifically meant for the parent element

Looking for assistance with overriding kendo UI validation requirements

Invoker of middleware and stack functions for Express.js with a focus on capturing the response object

Buttons for camera actions are superimposed on top of the preview of the capacitor camera

An error occurred while defining props due to a parsing issue with the prop type. The unexpected token was encountered. Perhaps you meant to use `{`}` or `}`?

linking to a page that shows the user's chosen option from a dropdown menu

Angular Material Datepicker: Changing the input field format when the field value is updated

Angular refreshes outdated DOM element