create div with content from array of objects?

Question

So I have:

arrayofobj = [
    {
        property: "string",   // "card" object with different data types
        property2: integer
    },
    {
        property: "string",   // "card" object with different data types
        property2: integer
    },
    {
        //etc more cards
    }
];

var playDeck = arrayofobj.slice(0);//creates copy of deck to "use" for game
shuffled(playDeck);//shuffles deck
playerHand = [];//empty array to save cards into
deal10(playDeck);//removes the 1st 10 out of playDeck and puts in playerHand

Now from the 10 that get drawn into playerHand, I'm trying to display them on screen. I have a field set up with:

<div id="playerHand"></div>

My attempt which hasn't been very successful:

for (var i = 0; i < playerHand.length; i++) {
    content = playerHand[i];
    x = document.getElementById('playerHand').appendChild(document.createElement('div'));
    x.className = 'card' + [i];
    document.getElementsByClassName('card' + [i]).textContent = content;
}

I haven't been able to achieve the desired effect. I'm a beginner as far as programming goes so I'm open to constructive criticism. So if you haven't gathered already what I'm trying to do is display each object or card on the screen as its own div (so that I can add click handlers to them and have the clicked one played on the screen... for example.)

Shouldn't you be using player1Hand as ID instead of playerHand then? in your HTML? — Sandeep Nayak
– Sandeep Nayak, Commented Oct 9, 2015 at 6:25
document.getElementById('player1Hand').. Is this ID name correct? — Sandeep Nayak
– Sandeep Nayak, Commented Oct 9, 2015 at 6:25

Rudolf · Accepted Answer · 2015-10-09 06:41:53Z

2

I think the main problem is getElementsByClassName, which returns an array and not the actual reference to the element. See below:

var data, content, container, element;

container = document.getElementById('container');
data = [
    {
        name: "stringa"
    },
    {
        name: "stringb"
    }
];


for (var i = 0; i < data.length; i++) {
    // Are you accessing an actual property in your code? It seems
    // you are just referencing the whole object.
    content = data[ i ].name;

    // Just save the createElement reference ;)
    element = document.createElement('div');

    // Why are you appending [i] instead of i directly?
    element.className = 'card' + i;

    // By saving the element directly we don't have to query for
    // the class in this step. The other problem was probably that
    // `getElementsByClassName` returns an array, so you would have
    // to call:                                      vvv
    // document.getElementsByClassName('card' + [i])[ 0 ]
    element.textContent = content;

    container.appendChild( element );
}

Obligatory JSFiddle: http://jsfiddle.net/tgtefsrm/1/

answered Oct 9, 2015 at 6:41

Rudolf

1,8762 gold badges20 silver badges32 bronze badges

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

2 Comments

zSavic Over a year ago

<3 you're a legend. that worked perfectly. as the whole object and with properties. Thanks a bunch!!

Rudolf Over a year ago

Glad you are happy :-) Don't forget to mark the correct answer on your questions!

Collectives™ on Stack Overflow

create div with content from array of objects?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related