How can I map over an object and set it to another object without overwriting the previous values?

Question

I'm working with a form that has sections where there can be multiple addresses, ids, etc. I'm taking the value of those objects and mapping it to another object that my API can understand. The problem I'm having is that when I have more than two addresses or ids my function overwrites all the additional ones with the last one that I pass.

For instance, I expect to take this data

data = {
  question_11_address: "124 Aspen Rd",
  question_12_city: "South Orange",
  question_13_state: "NJ",
  question_14_zip: "07052",
  question_15_country: "USA",
  question_11_address_copy_0: "123 Main St",
  question_12_city_copy_0: "Jersey City",
  question_13_state_copy_0: "NJ",
  question_14_zip_copy_0: "07302",
  question_15_country_copy_0: "USA",
  question_11_address_copy_1: "110 Marrin St",
  question_12_city_copy_1: "Hoboken",
  question_13_state_copy_1: "NJ",
  question_14_zip_copy_1: "07302",
  question_15_country_copy_1: "USA",
}

transform to ...

const finalAddresses = [
  {
    address: "124 Aspen Rd",
    city: "South Orange",
    state: "NJ",
    zip: "07052",
    country: "USA",
  },
  {
    address: "123 Main St",
    city: "Jersey City",
    state: "NJ",
    zip: "07302",
    country: "USA",
  }
  {
    address: "110 Marrin St",
    city: "Hoboken",
    state: "NJ",
    zip: "07302",
    country: "USA",
  },
]; 

Instead what I'm getting is ...

const finalAddresses = [
  {
    address: "124 Aspen Rd",
    city: "South Orange",
    state: "NJ",
    zip: "07052",
    country: "USA",
  },
  {
    address: "110 Marrin St",
    city: "Hoboken",
    state: "NJ",
    zip: "07302",
    country: "USA",
  },
  {
    address: "110 Marrin St",
    city: "Hoboken",
    state: "NJ",
    zip: "07302",
    country: "USA",
  },
]; 

Clearly I'm overwriting the object that I'm passing to my function with the last value, however I'm not sure how to fix it. I've tried many approaches, including pushing the object to my array before calling my function again, but I'm still having this problem. Please see my codesandbox for the full code.

Answer 1

Your data structure is a bit of a nightmare. It combines data from various records into a single record. That being said, you should be able to extract the various records by their "_copy_0" key parts (or lack thereof).

This code looks for "question_11_address" + some ending. At the start, the ending is empty, but after the first iteration it adds "copy" and a number that increases.

data = {
  question_11_address: "124 Aspen Rd",
  question_12_city: "South Orange",
  question_13_state: "NJ",
  question_14_zip: "07052",
  question_15_country: "USA",
  question_11_address_copy_0: "123 Main St",
  question_12_city_copy_0: "Jersey City",
  question_13_state_copy_0: "NJ",
  question_14_zip_copy_0: "07302",
  question_15_country_copy_0: "USA",
  question_11_address_copy_1: "110 Marrin St",
  question_12_city_copy_1: "Hoboken",
  question_13_state_copy_1: "NJ",
  question_14_zip_copy_1: "07302",
  question_15_country_copy_1: "USA",
}

const output = [];
let currentItem = "";
let currentItemNumber = 0;

while (data["question_11_address" + currentItem]) {
  output.push({
    address: data["question_11_address" + currentItem],
    city: data["question_12_city" + currentItem],
    state: data["question_13_state" + currentItem],
    zip: data["question_14_zip" + currentItem],
    country: data["question_15_country" + currentItem]
  });
  currentItem = "_copy_" + currentItemNumber;
  currentItemNumber++;
}

console.log(output);

Answer 2

You pass the same object to your "generate" function twice by reference:

const addressObject = {};
const addressCounterArray = ... // [0,1];

const addressCopyArray = addressCounterArray.map((index) => {
  return generateCorrectAddressFormat(index, addressObject, sectionAddress);
});

Therefore, you don't have two objects - it's the very same object, included in the resulting array twice, and with the values corresponding to the last index that you "generated" it with. You can verify this by running console.log(finalAddresses[1] === finalAddresses[2]). === checks for equality by reference, so it will only log true when it is literally the same object, not just two objects with the same values.

Instead, you should actually use a new object each time, for example by doing:

const addressCopyArray = addressCounterArray.map((index) => {
  return generateCorrectAddressFormat(index, {}, sectionAddress);
});

Answer 3

Here's a solution looping through the values of the data object, it only works if your data input is consistent though, there is almost certainly better solutions, but this might get you on the right track

const data = {
  question_11_address: "124 Aspen Rd",
  question_12_city: "South Orange",
  question_13_state: "NJ",
  question_14_zip: "07052",
  question_15_country: "USA",
  question_11_address_copy_0: "123 Main St",
  question_12_city_copy_0: "Jersey City",
  question_13_state_copy_0: "NJ",
  question_14_zip_copy_0: "07302",
  question_15_country_copy_0: "USA",
  question_11_address_copy_1: "110 Marrin St",
  question_12_city_copy_1: "Hoboken",
  question_13_state_copy_1: "NJ",
  question_14_zip_copy_1: "07302",
  question_15_country_copy_1: "USA",
};

const questionValues = Object.values(data);

let resultArr = [];
questionValues.forEach((val, index) => {
  if (index % 5 === 0) {
    resultArr.push({
      address: questionValues[index],
      city: questionValues[index + 1],
      state: questionValues[index + 2],
      zip: questionValues[index + 3],
      country: questionValues[index + 4],
    });
  }
});

console.log(resultArr);