Extract object from array to create another array

Question

I have an array with multiple objects inside like below.

[{ DishId: 40, DishName: "Mango", TimeSpan: 98},
 { DishId: 41, DishName: "Banana", TimeSpan: 99},
 { DishId: 42, DishName: "Orange", TimeSpan: 100}]

And i wanted to extract DishId and DishName from it and create another array of objects like below : Expected Output:

 [{ DishId: 40, DishName: "Mango"},
 { DishId: 41, DishName: "Banana"},
 { DishId: 42, DishName: "Orange"}]

I am doing below

allDishes = 
    [{ DishId: 40, DishName: "Mango", TimeSpan: 98},
     { DishId: 41, DishName: "Banana", TimeSpan: 99},
     { DishId: 42, DishName: "Orange", TimeSpan: 100}];

var dishes = {}; 
var dishesArray = []; 
for(i = 0; i < allDishes.length; i++){
  dishes.DishId=  allDishes[i].DishId;
  dishes.DishName =  allDishes[i].DishName;
  dishesArray.push(dishes);
}

It is giving same repeated objects where as i am wanting all different object as i shown in example above

[ { DishId: 42, DishName: 'Orange' },
  { DishId: 42, DishName: 'Orange' },
  { DishId: 42, DishName: 'Orange' }]

IvanD · Accepted Answer · 2020-11-22 07:17:44Z

You are reusing your dishes object, so in the following iterations you overwrite the changes that you made in the previous ones. All you need to do is to declare a new object every time in the loop, change its properties and then push it to the array.

If you want to understand why you cannot reuse the same object, research "objects are passed as a reference in JavaScript" and you will find plenty of information.

const allDishes = [{ // changed
    DishId: 40,
    DishName: "Mango",
    TimeSpan: 98
  },
  {
    DishId: 41,
    DishName: "Banana",
    TimeSpan: 99
  },
  {
    DishId: 42,
    DishName: "Orange",
    TimeSpan: 100
  }
];

const dishesArray = []; // changed
for (let i = 0; i < allDishes.length; i++) { // changed
  const dish = {} // NEW
  dish.DishId = allDishes[i].DishId;
  dish.DishName = allDishes[i].DishName;
  dishesArray.push(dish);
}

console.log(dishesArray);

Also, there is another way on how to do what you wanted to do. It's called map and it returns a new array, based on an old array. Also, you can use an object literal with it (instead of declaring properties, you can create an object with properties already included), like here:

const allDishes = [{
    DishId: 40,
    DishName: "Mango",
    TimeSpan: 98
  },
  {
    DishId: 41,
    DishName: "Banana",
    TimeSpan: 99
  },
  {
    DishId: 42,
    DishName: "Orange",
    TimeSpan: 100
  }
];

const dishesArray = allDishes.map((dish) => ({
  DishId: dish.DishId,
  DishName: dish.DishName
}));

console.log(dishesArray);

Other observations: always use const or let to declare your variables. Those are represented as changed comments in your code

Shivani patel · Accepted Answer · 2020-11-22 07:11:29Z

1

You can use map property of array directly as

let dishesArray = allDishes.map(dish => dish = {DishId : dish.DishId, DishName: dish.DishName })

answered Nov 22, 2020 at 7:11

Shivani patel

843 bronze badges

1 Comment

Praveen Kumar Purushothaman Over a year ago

Wow, that's a simple and quick solution! 😁

Marc · Accepted Answer · 2020-11-22 07:04:10Z

0

When you create dishes outside of the loop, you're pushing the same reference repeatedly onto your array. In my example below, I re-initialize dishes in every loop to generate a new reference.

My code is identical to your code except for where I initialize dishes.

allDishes = 
    [{ DishId: 40, DishName: "Mango", TimeSpan: 98},
     { DishId: 41, DishName: "Banana", TimeSpan: 99},
     { DishId: 42, DishName: "Orange", TimeSpan: 100}];

var dishesArray = []; 
for(i = 0; i < allDishes.length; i++){
  let dishes = {};   // re-initialize this to a new reference
  dishes.DishId=  allDishes[i].DishId;
  dishes.DishName =  allDishes[i].DishName;
  dishesArray.push(dishes);
}
console.log(dishesArray);

answered Nov 22, 2020 at 7:04

Marc

11.6k2 gold badges40 silver badges48 bronze badges

Collectives™ on Stack Overflow

Extract object from array to create another array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related