Unable to splice array of objects

Question

I was able to shuffle through my deck of cards (array of objects), but now I'm trying to pull out/remove the first 25 cards(objects) and place them into their own stored array. However, my code is returning undefined when I try to reference the new deck cards var player1Deck = shuffledCards.splice(25); is returning as not a function. Is there anyway to remove the first 25 cards/object from this new shuffled array that I created?

 //Deck with ranks var starterDeck = [ {"img": '2_of_clubs.png',"rank": 1},{"img": '3_of_clubs.png',"rank": 2},{"img": '4_of_clubs.png',"rank": 3},{"img": '5_of_clubs.png',"rank": 4},{"img": '6_of_clubs.png',"rank": 5},{"img": '7_of_clubs.png',"rank": 6},{"img": '8_of_clubs.png',"rank": 7},{"img": '9_of_clubs.png',"rank": 8},{"img": '10_of_clubs.png',"rank": 9},{"img": 'jack_of_clubs.png',"rank": 10},{"img": 'queen_of_clubs.png',"rank": 11},{"img": 'king_of_clubs.png',"rank": 12},{"img": 'ace_of_clubs.png',"rank": 13}, {"img": '2_of_diamonds.png',"rank": 1},{"img": '3_of_diamonds.png',"rank": 2},{"img": '4_of_diamonds.png',"rank": 3},{"img": '5_of_diamonds.png',"rank": 4},{"img": '6_of_diamonds.png',"rank": 5},{"img": '7_of_diamonds.png',"rank": 6},{"img": '8_of_diamonds.png',"rank": 7},{"img": '9_of_diamonds.png',"rank": 8},{"img": '10_of_diamonds.png',"rank": 9},{"img": 'jack_of_diamonds.png',"rank": 10},{"img": 'queen_of_diamonds.png',"rank": 11},{"img": 'king_of_diamonds.png',"rank": 12},{"img": 'ace_of_diamonds.png',"rank": 13}, {"img": '2_of_hearts.png',"rank": 1},{"img": '3_of_hearts.png',"rank": 2},{"img": '4_of_hearts.png',"rank": 3},{"img": '5_of_hearts.png',"rank": 4},{"img": '6_of_hearts.png',"rank": 5},{"img": '7_of_hearts.png',"rank": 6},{"img": '8_of_hearts.png',"rank": 7},{"img": '9_of_hearts.png',"rank": 8},{"img": '10_of_hearts.png',"rank": 9},{"img": 'jack_of_hearts.png',"rank": 10},{"img": 'queen_of_hearts.png',"rank": 11},{"img": 'king_of_hearts.png',"rank": 12},{"img": 'ace_of_hearts.png',"rank": 13}, {"img": '2_of_spades.png',"rank": 1},{"img": '3_of_spades.png',"rank": 2},{"img": '4_of_spades.png',"rank": 3},{"img": '5_of_spades.png',"rank": 4},{"img": '6_of_spades.png',"rank": 5},{"img": '7_of_spades.png',"rank": 6},{"img": '8_of_spades.png',"rank": 7},{"img": '9_of_spades.png',"rank": 8},{"img": '10_of_spades.png',"rank": 9},{"img": 'jack_of_spades.png',"rank": 10},{"img": 'queen_of_spades.png',"rank": 11},{"img": 'king_of_spades.png',"rank": 12},{"img": 'ace_of_spades.png',"rank": 13}, ] for(var i=0;i<52; i++) { // We are taking our tempCard and placing it in the random position (randomIndex) var shuffledCards = starterDeck[i]; var randomIndex = Math.floor(Math.random() * 52); starterDeck[i] = starterDeck[randomIndex] starterDeck[randomIndex] = shuffledCards; // let newDeck = [shuffledCards] console.log(shuffledCards) var player1Deck = shuffledCards.splice(25); console.log(player1Deck) }

Answer 1

Splice works like that: splice(objectIndex, steps). For example in an array of [2, 3, 4, 5, 6] if I do arr.splice(2,2) it will remove 5 and 6. Splice does not return anything as it removes items from array on the place (like forEach function compared to.map which returns new array). If you want to split the decks (first 26 items), use.slice instead => slice(0, 26) or better slice(0, arr.length / 2) I see your a newbie, so please, dont use vars, let & const are new methods to proclaim variables. Perhaps your tutorial is outdated

Answer 2

Solution

 const starterDeck = [{ "img": '2_of_clubs.png', "rank": 1 }, { "img": '3_of_clubs.png', "rank": 2 }, { "img": '4_of_clubs.png', "rank": 3 }, { "img": '5_of_clubs.png', "rank": 4 }, { "img": '6_of_clubs.png', "rank": 5 }, { "img": '7_of_clubs.png', "rank": 6 }, { "img": '8_of_clubs.png', "rank": 7 }, { "img": '9_of_clubs.png', "rank": 8 }, { "img": '10_of_clubs.png', "rank": 9 }, { "img": 'jack_of_clubs.png', "rank": 10 }, { "img": 'queen_of_clubs.png', "rank": 11 }, { "img": 'king_of_clubs.png', "rank": 12 }, { "img": 'ace_of_clubs.png', "rank": 13 }, { "img": '2_of_diamonds.png', "rank": 1 }, { "img": '3_of_diamonds.png', "rank": 2 }, { "img": '4_of_diamonds.png', "rank": 3 }, { "img": '5_of_diamonds.png', "rank": 4 }, { "img": '6_of_diamonds.png', "rank": 5 }, { "img": '7_of_diamonds.png', "rank": 6 }, { "img": '8_of_diamonds.png', "rank": 7 }, { "img": '9_of_diamonds.png', "rank": 8 }, { "img": '10_of_diamonds.png', "rank": 9 }, { "img": 'jack_of_diamonds.png', "rank": 10 }, { "img": 'queen_of_diamonds.png', "rank": 11 }, { "img": 'king_of_diamonds.png', "rank": 12 }, { "img": 'ace_of_diamonds.png', "rank": 13 }, { "img": '2_of_hearts.png', "rank": 1 }, { "img": '3_of_hearts.png', "rank": 2 }, { "img": '4_of_hearts.png', "rank": 3 }, { "img": '5_of_hearts.png', "rank": 4 }, { "img": '6_of_hearts.png', "rank": 5 }, { "img": '7_of_hearts.png', "rank": 6 }, { "img": '8_of_hearts.png', "rank": 7 }, { "img": '9_of_hearts.png', "rank": 8 }, { "img": '10_of_hearts.png', "rank": 9 }, { "img": 'jack_of_hearts.png', "rank": 10 }, { "img": 'queen_of_hearts.png', "rank": 11 }, { "img": 'king_of_hearts.png', "rank": 12 }, { "img": 'ace_of_hearts.png', "rank": 13 }, { "img": '2_of_spades.png', "rank": 1 }, { "img": '3_of_spades.png', "rank": 2 }, { "img": '4_of_spades.png', "rank": 3 }, { "img": '5_of_spades.png', "rank": 4 }, { "img": '6_of_spades.png', "rank": 5 }, { "img": '7_of_spades.png', "rank": 6 }, { "img": '8_of_spades.png', "rank": 7 }, { "img": '9_of_spades.png', "rank": 8 }, { "img": '10_of_spades.png', "rank": 9 }, { "img": 'jack_of_spades.png', "rank": 10 }, { "img": 'queen_of_spades.png', "rank": 11 }, { "img": 'king_of_spades.png', "rank": 12 }, { "img": 'ace_of_spades.png', "rank": 13 }, ]; let player1Deck = []; for (let i = 0; i < 52; i++) { const randomIndex = Math.floor(Math.random() * 52); const shuffledCards = starterDeck[i]; starterDeck[i] = starterDeck[randomIndex]; starterDeck[randomIndex] = shuffledCards; player1Deck = starterDeck.slice(25); } console.log(player1Deck)

Analysis

You were trying to slice from shuffledCards but this is an object for your swapping logic. Instead you should get cards from starterDeck .

 player1Deck = starterDeck.slice(25); // Slice doesn't manipulate new array

Also updated the code with new ES6+ features.

Answer 3

You try to use an Array method over shuffledCards but in the code every time the loop run you define shuffledCards again and you assign it an object as value

var shuffledCards = starterDeck[i];

starterDeck is an Array so if you do starterDeck[i] you get the value of that position (an Object)

Try to define starterDeck out of the loop and inside the loop you going to push the values then outside the loop you use splice(0, 25)

This way you delete from 0 position up to 25 position of Array.

Answer 4

From your code, you are using the splice method on an object, that's why you're getting the error. Since splice is a method used on arrays, you can fix the problem by adding all the shuffle cards to an array first before applying splice.

Something like the code below should work.

    const allShuffledCards = []
    for(var i=0;i<52; i++) {
                // We are taking our tempCard and placing it in the random position (randomIndex)
                var shuffledCards = starterDeck[i];
                var randomIndex = Math.floor(Math.random() * 52);
                starterDeck[i] = starterDeck[randomIndex]
                starterDeck[randomIndex] = shuffledCards;
               // let newDeck = [shuffledCards]
                console.log(shuffledCards)
    
                allShuffledCards.push(shuffledCards);
                console.log(player1Deck)
            }
   allShuffledCards.splice(0, 25)
   console.log(allShuffledCards)