Items not being added to array?

Question

So this should be super simple, but I have no idea whats wrong.

    var imageColors = [];

    $('.portfolio-image').each(function(index, el) {
        RGBaster.colors(this, {
          success: function(payload) {
            console.log(payload.dominant);
            imageColors.push(payload.dominant);
          }
        });
    });

    $('.portfolio-title').each(function(index, el) {
        $(this).css('color', 'imageColors[index]');
    });

});

So the code above has an array which should store colors from a set of images. Then we cycle through some text and set the text color to be the dominant color from each image in the order they are visible.

Anyways, the problem is no matter how I "add" something the imageColors array, nothing is in it. When I run a console.log of the length of the array it's always 0. So can someone explain why nothing is being added?

Answer 1

Since you have a success callback passed to colors plugin, it looks like a async method that means when the second each block is executed the array may not be filled with the desired data.

One solution here is to set the color css inside the callback like

var imageColors = [];
var $titles = $('.portfolio-title');
$('.portfolio-image').each(function (index, el) {
    RGBaster.colors(this, {
        success: function (payload) {
            imageColors.push(payload.dominant);
            $titles.eq(index).css('color', payload.dominant);
        }
    });
});

Answer 2

Take off String value

$.each(imageColors, function(index, el) {
    $('.portfolio-title').css('color', imageColors[index]);
});

ERROR 'imageColors[index]' CORRECTION imageColors[index]

Answer 3

You have to go with this

$('.portfolio-title').each(function(index, el) {
    $(this).css('color', imageColors[index]); \\ remove single quote
});