Color Thief Palette array not outputting correctly

Question

Wanted to play and have a reason to learn more jQuery so I decided to try my hand at Color Thief but I am having an issue outputting the array correctly. Sadly, the documentation isn't the greatest for Color Thief but after some searching I did find a question in regards to getColor() but not getPalette().

From my understanding of Color Thief's blog was createPalette() is an array but when I try to display the contents it stays within on <span>:

Code:

HTML:

<div class="imgtest">
<img id="theimage" src="item.jpg" alt="image">
</div>
<div id="results"></div>

jQuery:

<script type="text/javascript">
        $(window).ready(function(){
          var sourceImage = document.getElementById("theimage");
          var colorThief = new ColorThief();
          var color = [colorThief.getPalette(sourceImage, 2)];
          var newHTML = $.map(color, function(value) {
              return('<span>' + value + '</span>');
          });
          $("#results").html(newHTML.join(""));
       });
</script>

Output:

<span>205,144,9,245,228,217,172,196,11</span>

What am I doing wrong? My end goal to is display each color in array called color[].

Answer 1

If I'm right in thinking you want each color within it's own span, you need to join the values within the mapping. Each value of color is an array containing the color's RGB values:

var color = colorThief.getPalette(sourceImage, 2);
var newHTML = $.map(color, function(value) {
    return('<span>' + value.join(', ') + '</span>');
});
$("#results").html(newHTML.join(''));