Looking for assistance with a JavaScript code snippet

Question

Looking for assistance with a JavaScript code snippet

I have encountered an issue while iterating through receipts in the given code snippet. The objective is to fetch the receipt number for each receipt and add it to a JSON object. However, I am facing a problem where the same receipt is appearing in two separate JSON objects. Can anyone provide assistance with this matter? Thank you in advance.

const shopList = [];
const shop = {
"shopNumber": "2242461",
"shopDate": "2020-06-13T00:00:00.000-05:00",
"shopAmount": "100",
"shopBank": "HDFC",
"shopDetails": {
    "shopNumber": "1242461",
    "shopDate": "2020-06-13T00:00:00.000-05:00",
    "shopBank": "HDFC",
    "shopAmount": "100"
},
"receiptDetails": [{
        "userNumber": "115729",
        "receiptNumber": "temp1"
    },
    {
        "userNumber": "115726",
        "receiptNumber": "temp2"
    }
]

};
 shop.receiptDetails.forEach((receipt) => {
var temp = shop.shopDetails;
temp.receiptNumber = receipt.receiptNumber;
shopList.push({
    shopNumber: shop.shopNumber,
    userNumber: Number(receipt.userNumber),
    receiptNumber: receipt.receiptNumber,
    shopDetails: temp,
    isSync: 0
});
});
shopList.forEach((receipt) => {
console.log(receipt);
});

The current output shows:

{
shopNumber: '2242461',
userNumber: 115729,
receiptNumber: 'temp1',
shopDetails: {
    shopNumber: '1242461',
    shopDate: '2020-06-13T00:00:00.000-05:00',
    shopBank: 'HDFC',
    shopAmount: '100',
    receiptNumber: 'temp2' ----**this should be temp1**
},
isSync: 0
} {
shopNumber: '2242461',
userNumber: 115726,
receiptNumber: 'temp2',
shopDetails: {
    shopNumber: '1242461',
    shopDate: '2020-06-13T00:00:00.000-05:00',
    shopBank: 'HDFC',
    shopAmount: '100',
    receiptNumber: 'temp2'    
},
isSync: 0
}

javascript json

Answer 1

Answer №1

The reason for this behavior is due to the fact that temp acts as a reference to shop.shopDetails. In JavaScript, objects are passed by reference, so when you set temp.receiptNumber, it essentially becomes shop.shopDetails.receiptNumber. Therefore, the value of temp in the subsequent iterations carries over from the prior iteration

To gain a better understanding of how JavaScript handles object variables, I recommend reading this insightful explanation.

In terms of resolving your issue, one approach is to clone the shop.shopDetails object in every iteration, ensuring that you receive a fresh object each time.

For example:

const shopList = [];
const shop = {
    "shopNumber": "2242461",
    "shopDate": "2020-06-13T00:00:00.000-05:00",
    "shopAmount": "100",
    "shopBank": "HDFC",
    "shopDetails": {
        "shopNumber": "1242461",
        "shopDate": "2020-06-13T00:00:00.000-05:00",
        "shopBank": "HDFC",
        "shopAmount": "100"
    },
    "receiptDetails": [{
        "userNumber": "115729",
        "receiptNumber": "temp1"
    },
    {
        "userNumber": "115726",
        "receiptNumber": "temp2"
    }]
};

shop.receiptDetails.forEach((receipt) => {
    var temp = {...shop.shopDetails}; // This method clones an object; there are alternative techniques available.
    temp.receiptNumber = receipt.receiptNumber;
    shopList.push({
        shopNumber: shop.shopNumber,
        userNumber: Number(receipt.userNumber),
        receiptNumber: receipt.receiptNumber,
        shopDetails: temp,
        isSync: 0
    });
});

shopList.forEach((receipt) => {
    console.log(receipt);
});

Answer 2

The reason for this behavior is due to the fact that temp acts as a reference to shop.shopDetails. In JavaScript, objects are passed by reference, so when you set temp.receiptNumber, it essentially becomes shop.shopDetails.receiptNumber. Therefore, the value of temp in the subsequent iterations carries over from the prior iteration

To gain a better understanding of how JavaScript handles object variables, I recommend reading this insightful explanation.

In terms of resolving your issue, one approach is to clone the shop.shopDetails object in every iteration, ensuring that you receive a fresh object each time.

For example:

const shopList = [];
const shop = {
    "shopNumber": "2242461",
    "shopDate": "2020-06-13T00:00:00.000-05:00",
    "shopAmount": "100",
    "shopBank": "HDFC",
    "shopDetails": {
        "shopNumber": "1242461",
        "shopDate": "2020-06-13T00:00:00.000-05:00",
        "shopBank": "HDFC",
        "shopAmount": "100"
    },
    "receiptDetails": [{
        "userNumber": "115729",
        "receiptNumber": "temp1"
    },
    {
        "userNumber": "115726",
        "receiptNumber": "temp2"
    }]
};

shop.receiptDetails.forEach((receipt) => {
    var temp = {...shop.shopDetails}; // This method clones an object; there are alternative techniques available.
    temp.receiptNumber = receipt.receiptNumber;
    shopList.push({
        shopNumber: shop.shopNumber,
        userNumber: Number(receipt.userNumber),
        receiptNumber: receipt.receiptNumber,
        shopDetails: temp,
        isSync: 0
    });
});

shopList.forEach((receipt) => {
    console.log(receipt);
});

Answer 3

Answer №2

The issue with the duplicate receipt number arises from these two lines, where you are essentially duplicating the JSON object in the shopList. Only the last update is retained.

var temp = shop.shopDetails;
temp.receiptNumber = receipt.receiptNumber;

I suggest cloning the shopDetails and then adding the receiptNumber.

var temp = JSON.parse(JSON.stringify(shop.shopDetails));

Below is the revised code:

const shopList = [];
const shop = {
  "shopNumber": "2242461",
  "shopDate": "2020-06-13T00:00:00.000-05:00",
  "shopAmount": "100",
  "shopBank": "HDFC",
  "shopDetails": {
    "shopNumber": "1242461",
    "shopDate": "2020-06-13T00:00:00.000-05:00",
    "shopBank": "HDFC",
    "shopAmount": "100"
  },
  "receiptDetails": [{
    "userNumber": "115729",
    "receiptNumber": "temp1"
  },
  {
    "userNumber": "115726",
    "receiptNumber": "temp2"
  }
  ]

};
shop.receiptDetails.forEach((receipt) => {
  var temp = JSON.parse(JSON.stringify(shop.shopDetails));
  temp.receiptNumber = receipt.receiptNumber;
  shopList.push({
    shopNumber: shop.shopNumber,
    userNumber: Number(receipt.userNumber),
    receiptNumber: receipt.receiptNumber,
    shopDetails: temp,
    isSync: 0
  });
});
shopList.forEach((receipt) => {
  console.log(receipt);
});

Answer 4

The issue with the duplicate receipt number arises from these two lines, where you are essentially duplicating the JSON object in the shopList. Only the last update is retained.

var temp = shop.shopDetails;
temp.receiptNumber = receipt.receiptNumber;

I suggest cloning the shopDetails and then adding the receiptNumber.

var temp = JSON.parse(JSON.stringify(shop.shopDetails));

Below is the revised code:

const shopList = [];
const shop = {
  "shopNumber": "2242461",
  "shopDate": "2020-06-13T00:00:00.000-05:00",
  "shopAmount": "100",
  "shopBank": "HDFC",
  "shopDetails": {
    "shopNumber": "1242461",
    "shopDate": "2020-06-13T00:00:00.000-05:00",
    "shopBank": "HDFC",
    "shopAmount": "100"
  },
  "receiptDetails": [{
    "userNumber": "115729",
    "receiptNumber": "temp1"
  },
  {
    "userNumber": "115726",
    "receiptNumber": "temp2"
  }
  ]

};
shop.receiptDetails.forEach((receipt) => {
  var temp = JSON.parse(JSON.stringify(shop.shopDetails));
  temp.receiptNumber = receipt.receiptNumber;
  shopList.push({
    shopNumber: shop.shopNumber,
    userNumber: Number(receipt.userNumber),
    receiptNumber: receipt.receiptNumber,
    shopDetails: temp,
    isSync: 0
  });
});
shopList.forEach((receipt) => {
  console.log(receipt);
});

Looking for assistance with a JavaScript code snippet

Answer №1

Answer №2

Similar questions

Creating messages from an array using vanilla JavaScript or jQuery

Selecting the "pretty print" format for your Graph API request specifically

Scrollmagic - Creating dynamic effects by animating body and div backgrounds using multiple tweens

Is there a guarantee that XHR requests made within a click handler of an anchor tag will always be sent?

What is the reason behind Gson anticipating an array at the start but receiving an object instead?

Decoding JSON Data in Angular 2

"Encountering a problem with object transformation in Three.js using

Establish the editor's starting state

Verify the checkbox for validation is shown exclusively

What is the best way to bundle an Express server into an Electron application?

Quasar Vue - Qselect component not populating with async data, showing [object Object] as default value

Navigating through each item in a JSON file with robotframework and extracting specific ones based on a query

Displaying various images within a bootstrap modal window

React component showcasing live data based on the URL's input

JavaScript node_modules import issue

The repeated execution of a Switch Statement

JSON API Status Reversal

Using Javascript to Swap the Content of an Element

Zero values disappeared from the parameters in an Ajax request

The best approach for setting a select value and managing state in React using TypeScript