I have an array that requires mapping objects and pushing into a new array

Question

I have an array that requires mapping objects and pushing into a new array

Here is the Array that needs to be processed:

[
    {
        "batchno": "B-PI1-1",
        "unitId": 341,
        "productName": "Bar Soap",
        "productProfileId": 3950,
        "qty": 148,
        "returnQty": "20",
        "rate": 10,
        "salesRate": 20,
        "unitName": "PC",
        "gross": 200,
        "net": 200,
        "remarks": "sxzxz"
    },
    {
        "batchno": "B-PI4-1",
        "unitId": 341,
        "productName": "Biscuit",
        "productProfileId": 3951,
        "qty": 700,
        "returnQty": "20",
        "rate": 10,
        "salesRate": 60,
        "unitName": "PC",
        "gross": 200,
        "net": 200,
        "remarks": "zxzxzx"
    }
];

The task at hand is to create a new array, making sure not to duplicate entries:

if (this.primengTableHelper.initialRecords.length > 0) {
    this.primengTableHelper.initialRecords.map((item: any) => {
        console.log('item', item);
        this.singleItem.batchNo = item.batchno;
        this.singleItem.unitId = item.unitId;
        this.singleItem.productName = item.productName;
        this.singleItem.productProfileId = item.productProfileId;
        this.singleItem.qty = item.qty;
        this.singleItem.returnQty = item.returnQty
        this.singleItem.rate = item.rate;
        this.singleItem.salesRate = item.salesRate;
        this.singleItem.unitName = item.unitName;
        this.singleItem.gross = item.net;
        this.singleItem.net = item.net;
        this.singleItem.remarks = item.remarks;
        this.createOrEditDamageStockDto.paymentNO = this.voucherNO;
        this.createOrEditDamageStockDto.invoiceDate = 
            this.maxInvoiceDateFilter.toString();
        this.createOrEditDamageStockDto.damageStockDetailsListDto
            .push(this.singleItem);
    });

javascript

Answer 1

Answer №1

Continuously pushing the same this.singleItem, a single object, during each iteration leads to multiple references pointing to the same object. Instead, ensure that a fresh object is created in every iteration. Utilize spread syntax over individual assignments:

        const newItem = {...this.singleItem, ...item};
        // Make other changes to `newItem` properties if needed...
        // ...
        // Push the new object:
        this.createOrEditDamageStockDto.damageStockDetailsListDto
            .push(newItem);

It may not pertain directly to your query, but these lines within the loop are redundant as they remain constant throughout each iteration:

    this.createOrEditDamageStockDto.paymentNO = this.voucherNO;
    this.createOrEditDamageStockDto.invoiceDate = 
        this.maxInvoiceDateFilter.toString();

Place these statements outside the loop since they do not change. Also, consider using .forEach instead of .map when the result is not utilized. However, you can employ .map to generate an array for assignment to

this.createOrEditDamageStockDto.damageStockDetailsListDto

. The suitability depends on whether the array exists before the loop and requires preservation.

Answer 2

Continuously pushing the same this.singleItem, a single object, during each iteration leads to multiple references pointing to the same object. Instead, ensure that a fresh object is created in every iteration. Utilize spread syntax over individual assignments:

        const newItem = {...this.singleItem, ...item};
        // Make other changes to `newItem` properties if needed...
        // ...
        // Push the new object:
        this.createOrEditDamageStockDto.damageStockDetailsListDto
            .push(newItem);

It may not pertain directly to your query, but these lines within the loop are redundant as they remain constant throughout each iteration:

    this.createOrEditDamageStockDto.paymentNO = this.voucherNO;
    this.createOrEditDamageStockDto.invoiceDate = 
        this.maxInvoiceDateFilter.toString();

Place these statements outside the loop since they do not change. Also, consider using .forEach instead of .map when the result is not utilized. However, you can employ .map to generate an array for assignment to

this.createOrEditDamageStockDto.damageStockDetailsListDto

. The suitability depends on whether the array exists before the loop and requires preservation.

Answer 3

Answer №2

It seems like the question is not fully clear to me. You currently have an array consisting of two objects. Are you looking to create a new array with three objects, where the third object is a duplicate of the second one? In that case, you can achieve this by leveraging the ES6 spread operator as shown below:

const startingItems = [
  {
    "id": 1,
    "name": "Item A"
  },
  {
    "id": 2,
    "name": "Item B"
  }
]

const itemsWithDuplicate = [
  ...startingItems,
  startingItems[startingItems.length - 1]
]

You may find more information on the topic here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals

Answer 4

It seems like the question is not fully clear to me. You currently have an array consisting of two objects. Are you looking to create a new array with three objects, where the third object is a duplicate of the second one? In that case, you can achieve this by leveraging the ES6 spread operator as shown below:

const startingItems = [
  {
    "id": 1,
    "name": "Item A"
  },
  {
    "id": 2,
    "name": "Item B"
  }
]

const itemsWithDuplicate = [
  ...startingItems,
  startingItems[startingItems.length - 1]
]

You may find more information on the topic here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals

I have an array that requires mapping objects and pushing into a new array

Answer №1

Answer №2

Similar questions

Discovering the present width of an Angular element after it has been eliminated

Do you find this unattractive? What are some ways to improve this unsightly JavaScript statement?

Create a new variable to activate a function within the parent component in Vue

What is the solution to fixing the Vue 2 error when using Node 12?

Implementing Scroll-Activated Class with Vanilla JavaScript

The Angular JS field will only be considered valid if its value is more than zero

The Javascript Navbar is malfunctioning on Firefox

Breaking down setInterval IDs for their corresponding function parameters

Is there a method available to streamline the process of generating .json files for language translations?

The Angular controller encountered an unexpected token

Having difficulty changing the value of a Select element in AngularJS

Displaying a portion of a React functional component once an asynchronous function call has been successfully executed

Encountering difficulty when integrating external JavaScript libraries into Angular 5

Authorization in Confluence REST API

Retrieve the ID value of the paragraph that was clicked on using the right-click function

Browser lacks proper credentials for passport authentication

Warning: Promise rejection not handled, async/await is failing to resolve promise

What is the best method for arranging checkboxes in a vertical line alongside a list of items for uniform alignment?

Elements on the page appear and disappear as you scroll down

What is the reason behind having 3 watchers for 1 binding in AngularJS?