Access element of array inside object jQuery

Question

I want to fill a canvas with a color that's an element of an array inside an object and the element index should be i but the code seems to be wrong. The variables inside color1 are already declared and contain a string which is the hex value for the color.

var colorsObj = {
    color1: [orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin]
}

function drawCanvas(color) {
    for(var i = 1; i < 10; i++){
    $('.app').append('<canvas class="shadescolors" id="shade'+i+'"  width="100" height="100">');
    var canvas = document.getElementById('shade'+i);
    var context = canvas.getContext('2d');

    canvas.width = window.innerWidth / 3;
    cc = canvas.width;
    radius = cc/2-10;
    canvas.height = canvas.width;
    context.beginPath();
    context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true);
    alert(colorsObj.color[i]);
    context.fillStyle = colorsObj.color[i];
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = '#8A8A8A';
    context.stroke();
    }
}

drawCanvas('color1');

The alert doesn't fire either.

Your color object has a property which is an array named color1. You are trying to access the index of an array named color which doesn't exist. Secondly, your array contains a bunch of values which are probably all undefined. I think you mean to have them as strings colors: ['orange, 'amber' ... etc ] Because you are passing a string into your drawCanvas function, it looks like you're trying to access the colorObjects array, but you're using the wrong syntax. colorObj['color1'] would work. But I think you kinda have this all wrong, you may want to look up JavaScript objects & arrays — azium
– azium, Commented Apr 25, 2015 at 23:03
You should use your browser console (F12) to look at JavaScript errors to help you figure out what might be causing errors. — azium
– azium, Commented Apr 25, 2015 at 23:10

Michael Geary · Accepted Answer · 2015-04-25 23:19:02Z

The main problem here is that you need to use colorObj[color] to get to your color list instead of colorObj.color, because you want to use the value of the color variable to select the specific color list within colorObj. (I assume you may later have a color2 entry inside colorObj, etc., correct?)

Also you're missing the first element of the color list by starting your loop with 1, and the 10 loop limit should use the .length of the color list instead of being hard coded.

You're missing a var on a couple of the variables inside the loop, and since you set cc, canvas.width, and canvas.height all to the same value you may as well do all that in one statement.

As a simplification tip, it isn't necessary to give your canvas element a sequential ID and use getElementById() to find it. Instead you can save a reference to the element when you create it and just use that.

I also took out the width= and height= in the HTML code for the canvas element; they are redundant since you are setting the width and height in your code.

Finally, please indent your code! :-)

So you might try something like this:

var colorsObj = {
    color1: [ orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin ]
}

function drawCanvas( color ) {
    var colorList = colorsObj[color];
    for( var i = 0;  i < colorList.length;  i++ ) {
        var $canvas = $('<canvas class="shadescolors">').appendTo('.app');
        var canvas = $canvas[0];
        var context = canvas.getContext('2d');

        var cc = canvas.width = canvas.height = window.innerWidth / 3;
        var radius = cc/2-10;
        context.beginPath();
        context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true);
        context.fillStyle = colorsList[i];
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = '#8A8A8A';
        context.stroke();
    }
}

drawCanvas('color1');

John McMahon · Accepted Answer · 2015-04-25 23:05:39Z

0

Are the values in the color1 array strings or other variables? If they are strings this should be:

color1: ['orange','amber','apricot','tangerine','bittersweet','persimmon','salmon','peach','pumpkin']

Remember the first element in the array has index 0, so to fix your for loop I would do:

for(var i = 0; i < colorsObj.color1.length; i++)

There is also an error in your alert statement where you use alert(colorsObj.color[i]); instead of alert(colorsObj.color1[i]); (color1, not color)

answered Apr 25, 2015 at 23:05

John McMahon

1,6151 gold badge16 silver badges21 bronze badges

1 Comment

azium Over a year ago

On top of that, the drawCanvas function taking a color parameter, which is not really being used, but instead is the name of the wrong array is extra confusing things.

Collectives™ on Stack Overflow

Access element of array inside object jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related