Trouble creating array of objects

Question

I have an array and I want to pick 3 of its elements and put store it in another array as a single object and again repeatedly follow the same process on every 3 elements of the array. This is my code below:

let breakpoints = [
  {name: "from-amonut", value: "100"},
  {name: "to-amonut", value: "200"},
  {name: "gst", value: "10"},
  {name: "from-amonut", value: "200"},
  {name: "to-amonut", value: "300"},
  {name: "gst", value: "20"},
  {name: "from-amonut", value: "300"},
  {name: "to-amonut", value: "400"},
  {name: "gst", value: "30"}
];

let temp = {
  "from_amount": 0,
  "to_amount": 0,
  "gst": 0
};

let formattedBreakpoints = [];

breakpoints.map((v, k) => {
  (v.name == "from-amonut") ? temp.from_amount = v.value: "";
  (v.name == "to-amonut") ? temp.to_amount = v.value: "";
  (v.name == "gst") ? temp.gst = v.value: "";
  ((k + 1) % 3 === 0) ? (formattedBreakpoints.push(temp), console.log(temp)) : "";

});
console.log(formattedBreakpoints);

I'm expecting formattedBreakpoints to be [{"from_amount":100, "to_amount":200, "gst":10}, {"from_amount":200, "to_amount":300, "gst":20}.....] but only returns all the objects with the value of last array elements.

Your result array consists of references to the same object. — PM 77-1
– PM 77-1, Commented Oct 15, 2018 at 17:57

Ori Drori · Accepted Answer · 2018-10-15 18:00:50Z

2

You can use Array.reduce() to add all properties to the last object. Whenever the index (i) remainder from 3 is 0, you add another object to the accumulator.

const breakpoints = [{"name":"from-amonut","value":"100"},{"name":"to-amonut","value":"200"},{"name":"gst","value":"10"},{"name":"from-amonut","value":"200"},{"name":"to-amonut","value":"300"},{"name":"gst","value":"20"},{"name":"from-amonut","value":"300"},{"name":"to-amonut","value":"400"},{"name":"gst","value":"30"}];
        
const result = breakpoints.reduce((r, { name, value }, i) => {
  if(i % 3 === 0) r.push({});
  
  const key = name.replace(/-/g, '_');

  r[r.length - 1][key] = value;
  
  return r;
}, []);

console.log(result);

What's the problem in your code is the reuse of temp. Since temp is an object, pushing it to the array, adds the reference to the array, and doesn't create a new object. To prevent that, you can init temp whenever you get to the last property. You should also use Array.forEach() (do something with value) instead of Array.map() (create new array with items based on original values).

const breakpoints = [{"name":"from-amonut","value":"100"},{"name":"to-amonut","value":"200"},{"name":"gst","value":"10"},{"name":"from-amonut","value":"200"},{"name":"to-amonut","value":"300"},{"name":"gst","value":"20"},{"name":"from-amonut","value":"300"},{"name":"to-amonut","value":"400"},{"name":"gst","value":"30"}];

let temp = {};

const formattedBreakpoints = [];

breakpoints.forEach((v, k) => {
  if(v.name == "from-amonut") temp.from_amount = v.value;
  if(v.name == "to-amonut") temp.to_amount = v.value;
  if(v.name == "gst") { // whenever we get to gst, we can push to array, and reset temp
    temp.gst = v.value;
    formattedBreakpoints.push(temp);
    temp = {};
  };
});
console.log(formattedBreakpoints);

edited Oct 15, 2018 at 18:00

answered Oct 15, 2018 at 17:40

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zainul Abideen Over a year ago

Thank you so much. This works! But could you please tell me what's wrong with my code?

Zainul Abideen Over a year ago

oh! okay. But when I'm displaying temp just after pushing it into an array, I'm getting the correct object displayed in the console.

Ori Drori Over a year ago

Indeed, but you also changed all the previous items, because you are pointing to the same reference. Console log formattedBreakpoints after each step, and you'll see.

Eugene Tsakh · Accepted Answer · 2018-10-15 18:02:02Z

2

The problem with your code that you are mutating a single object temp and pushing it 3 times to the result array. So what's going on:

You are creating an object
In a map method you are mutating it repeatedly and after every 3 iterations you are setting reference to this object to the result array.

Key word here is reference. That means that this is the same object. For example:

const result = [];
const obj = {};

obj.a = 'a';
result.push(obj); // => result = [{ a: 'a' }]

obj.b = 'b';
result.push(obj); // => result = [{ a: 'a', b: 'b' }, { a: 'a', b: 'b' }]

Try this way:

let formattedBreakpoints = [];
for (let i = 0; i < breakpoints.length; i += 3) {
  const breakPointOptions = breakpoints.slice(i, i + 3);
  formattedBreakpoints.push(breakPointOptions.reduce((result, { name, value }) => {
    result[name] = value;
    return result;
  }, {}));
}

edited Oct 15, 2018 at 18:02

answered Oct 15, 2018 at 17:41

Eugene Tsakh

2,8812 gold badges18 silver badges28 bronze badges

5 Comments

Zainul Abideen Over a year ago

This works! But could you please tell me what's wrong with my code?

Eugene Tsakh Over a year ago

@zainulabdeen added detailed explanation

Zainul Abideen Over a year ago

So you mean we cannot override an object the way we normally do with a variable?

Eugene Tsakh Over a year ago

@zainulabdeen you can, it you reassign your object variable with a new object.

Zainul Abideen Over a year ago

okay, Thank you so much for your Help. Actually, all the answers to this question are correct. But I can only mark 1 answer as accepted. So I marked the first one.

pr0p · Accepted Answer · 2018-10-15 17:54:34Z

let breakpoints = [
    			{name: "from-amonut", value: "100"},
    			{name: "to-amonut", value: "200"},
    			{name: "gst", value: "10"},
    			{name: "from-amonut", value: "200"},
    			{name: "to-amonut", value: "300"},
    			{name: "gst", value: "20"},
    			{name: "from-amonut", value: "300"},
    			{name: "to-amonut", value: "400"},
    			{name: "gst", value: "30"}
    		]
    		let temp = {
    			"from_amount" : 0,
    			"to_amount" : 0,
    			"gst" : 0
    		};
    		let formattedBreakpoints = [];
    		breakpoints.map((v, k)=>{
    			(v.name == "from-amonut") ? temp.from_amount = v.value : "";
    			(v.name == "to-amonut") ? temp.to_amount = v.value : "";
    			(v.name == "gst") ? temp.gst = v.value : "";
    			((k + 1) % 3 === 0) ? (formattedBreakpoints.push(temp), temp = {... temp}) : "" ;
    			
    		});
    		console.log(formattedBreakpoints);

As temp is an object you are using it by reference. So you need to create a new object each time you push or else the same object will be referenced. Hence I'm using temp itself to create this new object.

Collectives™ on Stack Overflow

Trouble creating array of objects

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related