I'm creating a deck of cards (an array of card objects) by bining an array of suit objects, and an array of card objects, using javascript.

I'm using a forEach loop to loop through the suits, and nested is a map loop for the cards.

The console.log is returning the correct object to push to the new array, however the .push() is only appending a bined object using the last suit and the last card.

Where am I going wrong with this?

I have tried multiple different loops and methods to append to a new array without luck. Console.log() returns the correct value, but I am unable to push the correct bined objects to a new array.

  // Deck of Cards
var suits = [
  { suit: "clubs", color: "black" },
  { suit: "spades", color: "black" },
  { suit: "hearts", color: "red" },
  { suit: "diamonds", color: "red" }
];

var family = [
  { name: "2", value: 2 },
  { name: "3", value: 3 },
  { name: "4", value: 4 },
  { name: "5", value: 5 },
  { name: "6", value: 6 },
  { name: "7", value: 7 },
  { name: "8", value: 8 },
  { name: "9", value: 9 },
  { name: "10", value: 10 },
  { name: "J", value: 10 },
  { name: "Q", value: 10 },
  { name: "K", value: 10 },
  { name: "A", value: 1 },
];

var deck = new Array();

suits.forEach(function (x) {
  var arr = family.map((y) => {
    var obj = Object.assign(x, y);
    console.log(obj);
    deck.push(obj);
    return obj;
  });
  
  console.log(arr);
});

console.log(deck);

I'm creating a deck of cards (an array of card objects) by bining an array of suit objects, and an array of card objects, using javascript.

I'm using a forEach loop to loop through the suits, and nested is a map loop for the cards.

The console.log is returning the correct object to push to the new array, however the .push() is only appending a bined object using the last suit and the last card.

Where am I going wrong with this?

I have tried multiple different loops and methods to append to a new array without luck. Console.log() returns the correct value, but I am unable to push the correct bined objects to a new array.

  // Deck of Cards
var suits = [
  { suit: "clubs", color: "black" },
  { suit: "spades", color: "black" },
  { suit: "hearts", color: "red" },
  { suit: "diamonds", color: "red" }
];

var family = [
  { name: "2", value: 2 },
  { name: "3", value: 3 },
  { name: "4", value: 4 },
  { name: "5", value: 5 },
  { name: "6", value: 6 },
  { name: "7", value: 7 },
  { name: "8", value: 8 },
  { name: "9", value: 9 },
  { name: "10", value: 10 },
  { name: "J", value: 10 },
  { name: "Q", value: 10 },
  { name: "K", value: 10 },
  { name: "A", value: 1 },
];

var deck = new Array();

suits.forEach(function (x) {
  var arr = family.map((y) => {
    var obj = Object.assign(x, y);
    console.log(obj);
    deck.push(obj);
    return obj;
  });
  
  console.log(arr);
});

console.log(deck);

• javascript
• arrays
• object

• Some notes: 1. You don't need to assign the arr variable since it isn't being used anywhere (other than the console.log statement later), 2. You should use .forEach instead of .map for the inner loop since you're pushing the desired object onto the deck, 3. With .map updated to .forEach, you should remove the return value from it – stevendesu Commented May 10, 2019 at 19:54
• @stevendesu Your 100% right - I was using .map and assigning it to a new array for troubleshooting. Thanks! – flowoverstack Commented May 10, 2019 at 20:13

3 Answers 3

try Object.assign({}, x, y) instead of Object.assign(x, y). Currently you're manipulating the object that is x, by adding all properties of y to it.

// Deck of Cards
var suits = [
    {suit: "clubs",color: "black"},
    {suit: "spades",color: "black"},
    {suit: "hearts",color: "red"},
    {suit: "diamonds",color: "red"}    
];

var family = [
    {name: "2",value: 2},
    {name: "3",value: 3},
    {name: "4",value: 4},
    {name: "5",value: 5},
    {name: "6",value: 6},
    {name: "7",value: 7},
    {name: "8",value: 8},
    {name: "9",value: 9},
    {name: "10",value: 10},
    {name: "J",value: 10},
    {name: "Q",value: 10},
    {name: "K",value: 10},
    {name: "A",value: 1},
];

var deck = new Array();

suits.forEach(function(x){

    var arr = family.map( (y) => {
        var obj = Object.assign({}, x, y); 
        deck.push(obj);
        return obj; 
    });

});

console.log(deck);

Object.assign(x,y) will put the values of y onto x. You want to leave x alone, so store your properties in a new Object using Object.assign({}, x,y). Consider the demo below:

var suits = [
    {suit: "clubs",color: "black"},
    {suit: "spades",color: "black"},
    {suit: "hearts",color: "red"},
    {suit: "diamonds",color: "red"}    
];

var family = [
    {name: "2",value: 2},
    {name: "3",value: 3},
    {name: "4",value: 4},
    {name: "5",value: 5},
    {name: "6",value: 6},
    {name: "7",value: 7},
    {name: "8",value: 8},
    {name: "9",value: 9},
    {name: "10",value: 10},
    {name: "J",value: 10},
    {name: "Q",value: 10},
    {name: "K",value: 10},
    {name: "A",value: 1},
];

const tmp = suits.reduce((acc, s) => {
  return acc.concat(family.map(f => {
    return Object.assign({}, f, s);
  }));
}, []);

const pre = document.createElement("pre");
pre.innerHTML = JSON.stringify(tmp, null, 4);
document.body.appendChild(pre);

If you can use flatmap, then it can be made significantly simpler:

const suits = [{ suit: "clubs", color: "black" }, { suit: "spades", color: "black" }, { suit: "hearts", color: "red" }, { suit: "diamonds", color: "red" }]
const family = [{ name: "2", value: 2 }, { name: "3", value: 3 }, { name: "4", value: 4 }, { name: "5", value: 5 }, { name: "6", value: 6 }, { name: "7", value: 7 }, { name: "8", value: 8 }, { name: "9", value: 9 }, { name: "10", value: 10 }, { name: "J", value: 10 }, { name: "Q", value: 10 }, { name: "K", value: 10 }, { name: "A", value: 1 }]

const deck = suits.flatMap(s => family.map(f => ({...s, ...f})))

console.log(deck)

A side note, there seems to be a strong convention (presumably from Bridge) of ordering the suits clubs/diamonds/hearts/spades. In English that's easy to remember since they're alphabetic.)