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)
        }

what do you get when you console.log(shuffledCards)? It looks like you're setting shuffledCards to a single card in the for loop, so it wouldn't be an array, therefore you wouldn't be able to splice. You'll probably want to move any logic that deals with the whole deck to after the for loop. — Ross
– Ross, Commented Nov 19, 2022 at 18:53
shuffledCards = starterDeck[i] - shuffledCards is not an array — Konrad
– Konrad, Commented Nov 19, 2022 at 18:53

ColdDarkness · Accepted Answer · 2022-11-19 18:59:17Z

0

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

answered Nov 19, 2022 at 18:59

ColdDarkness

3312 silver badges9 bronze badges

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

Comments

Francisco Gomez · Accepted Answer · 2022-11-19 19:04:26Z

0

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.

edited Nov 19, 2022 at 19:04

answered Nov 19, 2022 at 19:03

Francisco Gomez

112 bronze badges

Comments

rotimi · Accepted Answer · 2022-11-19 19:06:33Z

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)

codinn.dev · Accepted Answer · 2022-11-19 19:09:21Z

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.

Collectives™ on Stack Overflow

Unable to splice array of objects

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related