Array concat is overwriting the values in for..each loop

Question

const states = ["BR", "UP"];
const template = [
    {
      "State": "",
      "allotment": 25622
    },
    {
      "State": "",
      "expenditure": 1254
    }
  ];

let totalRecords: any[] = [];
states.forEach(state=>{
  const cc = template.map(record=> {record.State = state; return record})
  console.log(state, cc);// here i get the indiviual record set.
  totalRecords = totalRecords.concat(cc);
})
console.log(totalRecords);

here i am trying to get a concatenated list of template with different states, but somehow it is overwriting the previous records. although as seen in the console after adding map to template, a proper record set is seen. still it is not concatenating properly.

how to do it properly as required result is

[{
  "State": "BR",
  "allotment": 25622
}, {
  "State": "BR",
  "expenditure": 1254
}, {
  "State": "UP",
  "allotment": 25622
}, {
  "State": "UP",
  "expenditure": 1254
}]

user_157247 · Answer

The problem is that you're reusing the objects from template, just overwriting the properties of those objects. If you want to have multiple objects for each state, you'll need to create new objects instead:

const cc = template.map((record) => {
    record = { ...record, State: state }; // ***
    return record;
});

Live Example:

const states = ["BR", "UP"];
const template = [
    {
        State: "",
        allotment: 25622,
    },
    {
        State: "",
        expenditure: 1254,
    },
];

let totalRecords /*: any[]*/ = [];
states.forEach((state) => {
    const cc = template.map((record) => {
        record = { ...record, State: state };
        return record;
    });
    console.log(state, cc);
    totalRecords = totalRecords.concat(cc);
});
console.log(totalRecords);

.as-console-wrapper {
    max-height: 100% !important;
}

user_14326899 · Answer

you can use flatMap and map for that like this

const states = ["BR", "UP"];
const template = [
    {
      "State": "",
      "allotment": 25622
    },
    {
      "State": "",
      "expenditure": 1254
    }
  ];


const totalRecords =  states.flatMap(State=> template.map(record=> ({...record, State})))

console.log(totalRecords)

user_12368154 · Answer

The problem in your program lies here: template.map(record=> {record.State = state; return record})

You are not returning a new object, you are overwriting a previous one.

Try this:

const states = ["BR", "UP"];
const template = [
    {
      "State": "",
      "allotment": 25622
    },
    {
      "State": "",
      "expenditure": 1254
    }
  ];

let totalRecords: any[] = [];
states.forEach(state=>{
  const cc = template.map(record=> ({...record, 'State': state}))
  totalRecords = totalRecords.concat(cc);
})
console.log(totalRecords);

user_1932552 · Answer

You can use Array.prototype.reduce() combined with Array.prototype.concat(), Array.prototype.map() and Spread syntax (...)

Code:

const states = ['BR', 'UP']
const template = [{State:'',allotment: 25622,},{State:'',expenditure:1254}]

const totalRecords = states.reduce(
  (a, State) => a.concat(template.map((t) => ({ ...t, State }))), 
  []
)

console.log(totalRecords)

Array concat is overwriting the values in for..each loop

4 Answers