Javascript Combining arrays of objects

Question

When executed. The code alerts an array full of undefined objects. I am trying to make a deck of cards by having each card be an array element that has 2 object attributes (suit and value). I think the issue is in the convergence of the 2 arrays.

Thanks for your help in advance!

 <body>
    <h1>Problem #1</h1>
    <h2>Number of Players:</h2>
    <form id='form'>
        <input type="radio" name="playerChoice" id="playerChoice-1" value="1" />
        <label for="playerChoice-1">1</label>
        <input type="radio" name="playerChoice" id="playerChoice-2" value="2" />
        <label for="playerChoice-2">2</label>
        <input type="radio" name="playerChoice" id="playerChoice-3" value="3" />
        <label for="playerChoice-3">3</label>
        <input type="radio" name="playerChoice" id="playerChoice-4" value="4" checked="checked" />
        <label for="playerChoice-4">4</label>
    </form>
    <a id="deal" href="#">Deal</a>
    <div id="theDealtHands">
        <p id='p1'>Player 1:</p>
        <p id='p2'>Player 2:</p>
        <p id="p3">Player 3:</p>
        <p id='p4'>Player 4:</p>
    </div>

    <script src="js/jquery-2.0.3.min.js"></script>
    <script>
        $( document ).ready(function() {
            alert("Welcome to the Card House!");
            //Add the event listener for the deal button here
            $('#deal').click(function(){
                var deck = createDeck();
                var deck = shuffleDeck(deck);
                var choice = $('input[name=playerChoice]:checked', '#form').val();
                dealCards(choice, deck);
            });
        });

        var createDeck = function(){
            var deck = [];
            var suits = [{suit: 'hearts'}, {suit: 'spades'}, {suit: 'diamonds'}, {suit: 'clubs'}];
            for (var x =0; x<4; x++){
                deck.push({value: 'Ace'}, {value: '2'}, {value: '3'}, {value: '4'}, {value: '5'}, {value: '6'}, {value: '7'}, {value: '8'}, {value: '9'}, {value: '10'}, {value: 'Jack'}, {value: 'Queen'}, {value: 'King'});
            }
            alert(deck);
            for (var y=0; y<52; y++){
                if(y<13){ deck[y] = deck[y] + suits[0];}
                else if (y<26){ deck[y] = deck[y] +suits[1];}
                else if (y<39) { deck[y] = deck[y] + suits[2];}
                else {deck[y] = deck[y] + suits[3];}
            } 
            return deck;
        };


    </script>        
</body>

Note: JavaScript doesn't support *adding* objects to merge them, but [there are options to accomplish that](http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically). — Jonathan Lonowski, Nov 01 '14 at 06:16

score 0 · Answer 1 · answered Nov 03 '14 at 13:30

To merge objects you can simply use underscorejs by calling _.extend() method

_.extend(destination, *sources)

just note that properties with the same name in source and destination will be replaced by the new ones

example

var obj1 = {p1:'v1',p2:'v2'};
var obj2 = {p1:'v3',p4:'v4'};

var obj3 = _.extend(obj1,obj2) // which is {p1:'v3',p2:'v2',p4:'v4'}

for more details you can check underscorejs _.extend

Javascript Combining arrays of objects

1 Answers1