Replicating an array of typed objects in Angular2

Question

Replicating an array of typed objects in Angular2

I have a collection of specific object types and I'm looking to duplicate it so that I can work on a separate version.

In order for the configuratorProduct to function correctly, I need to provide it with a copy of the listProducts values:

  listProducts: Product[];
  configuratorProducts : Product[];

This is my current approach:

  this.configuratorProducts = this.listProducts.map(x => Object.assign({}, x));
    for(let p in this.configuratorProducts)
    {
      var ck = this.accessories.filter(x=> x.idProductParent == p.idProduct);
    }

The issue I am encountering is that the compiler is displaying:'Property 'idProduct' does not exist on type 'string'

How can this be resolved?

Thanks for your assistance.

angular typescript

Answer 1

Answer №1

This clone function is quite handy for me

const clone = obj =>
  Array.isArray(obj)
    ? obj.map(item => clone(item))
    : obj instanceof Date
      ? new Date(obj.getTime())
      : (typeof obj === 'object') && obj
        ? Object.getOwnPropertyNames(obj).reduce((o, prop) => ({ ...o, [prop]: clone(obj[prop]) }), {})
        : obj;

Take a look at the live demo

https://stackblitz.com/edit/typescript-qmzgf7

If the input is an array, it returns a cloned array with each item. If it's a date, a new date object is created. If it's an object, the properties are reduced to a new object with each property cloned. Otherwise, it just returns the value or function as is.

Answer 2

This clone function is quite handy for me

const clone = obj =>
  Array.isArray(obj)
    ? obj.map(item => clone(item))
    : obj instanceof Date
      ? new Date(obj.getTime())
      : (typeof obj === 'object') && obj
        ? Object.getOwnPropertyNames(obj).reduce((o, prop) => ({ ...o, [prop]: clone(obj[prop]) }), {})
        : obj;

Take a look at the live demo

https://stackblitz.com/edit/typescript-qmzgf7

If the input is an array, it returns a cloned array with each item. If it's a date, a new date object is created. If it's an object, the properties are reduced to a new object with each property cloned. Otherwise, it just returns the value or function as is.

Answer 3

Answer №2

To duplicate an array, utilize the spread operator

newProducts = [...originalArray]

Answer 4

To duplicate an array, utilize the spread operator

newProducts = [...originalArray]

Answer 5

Answer №3

Property 'idProduct' does not exist on type 'string'

because the variable p is of type string. A simple mistake was made.

for(let p in this.configuratorProducts)
{
  ...
}

This should be corrected to:

for(let p of this.configuratorProducts)
    {
      ...
    }

for(let p in this.configuratorProducts)

is used to iterate over keys of an object, which are strings. The of keyword is used to iterate over values, which in this case are Product.

It's important to understand the difference between Deep Clone and Shallow Clone before using either method.

Answer 6

Property 'idProduct' does not exist on type 'string'

because the variable p is of type string. A simple mistake was made.

for(let p in this.configuratorProducts)
{
  ...
}

This should be corrected to:

for(let p of this.configuratorProducts)
    {
      ...
    }

for(let p in this.configuratorProducts)

is used to iterate over keys of an object, which are strings. The of keyword is used to iterate over values, which in this case are Product.

It's important to understand the difference between Deep Clone and Shallow Clone before using either method.

Answer 7

Answer №4

Have you considered using a generic static clone tool?

Take this code snippet for instance:

import {Injectable} from "@angular/core";

@Injectable()
export class ObjectCopier{

  public static duplicate(obj: Object): Object {
    if (null == obj || "object" != typeof obj) return obj;
    let copy = obj.constructor();
    for (let prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        copy[prop] = obj[prop];
      }
    }
    return copy;
  }
}

(I came across this on SO, but couldn't locate the original source.)

Alternatively, you may find success with other methods of object cloning as well.

Answer 8

Have you considered using a generic static clone tool?

Take this code snippet for instance:

import {Injectable} from "@angular/core";

@Injectable()
export class ObjectCopier{

  public static duplicate(obj: Object): Object {
    if (null == obj || "object" != typeof obj) return obj;
    let copy = obj.constructor();
    for (let prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        copy[prop] = obj[prop];
      }
    }
    return copy;
  }
}

(I came across this on SO, but couldn't locate the original source.)

Alternatively, you may find success with other methods of object cloning as well.

Replicating an array of typed objects in Angular2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Circular dependency in Angular between two components

Ensure the variable is valid by using a type guard in the false branch

A guide on verifying input for null with ngIf

Avoiding redundant requests with the same parameters in Angular/NGRX

Displaying updated information in Angular

Modify the data displayed on the chart by choosing the desired year from the dropdown options

The method Observable.combineLatest is not implemented

Navigation arrows for sliding`

How to generate a SHA256 hash of the body and encode it in base64 using Python compared to

Troubleshooting: Why is my switch-case statement in TypeScript not functioning as expected

Error in Ionic2 TypeScript: 'google' and '$' names not found, despite Google Maps and jQuery functioning correctly

What is the best way to verify a numerical input in a React component?

Standing alone, an argument can never be fully validated without

Achieve top-notch performance with an integrated iFrame feature in Angular

The passing of values from a parent component to a child component seems to be encountering issues in the

Send a function as a parameter to another component, but it remains dormant

Lazy loading in Angular 2 hits a snag when using a module that is shared

What is the best way to iterate over JSON data from an endpoint that contains multiple nested arrays using the .map() method?

Transferring data between ngModel instances

My project in WebStorm encounters a setback due to the updated release of Typescript 5+