Array to grab colors

Hey there,

I have a JSON object that grabs swatch colors then converts to hex. I then bring that hex back to javascript and the array shows, but it won't make custom color blocks from the CSS code. if I hand type in a bunch of random hex colors into an array it does work then.

when I alert hexArray I get: #ffffff,#00adef,#ec008b,#ff100,#d12229,#40ad48 and so on....

I then push this array into another to make up for the colors none and paper. I run a delay because otherwise, I do not see those colors.

I then run the following code to build a li list with the swatch name and a color block next to it. when I use the pulled in code it doesn't except the array colorbox. but if I build my own array in javascript it does.

Does anyone know what I am doing wrong here?

Here is my js code:

/* Create an instance of CSInterface. */
var csInterface = new CSInterface();

//======================= DROPDOWN COLOR SWATCHES===================//
//=====================LAYOUT PANEL===============================//
var customDropdown = document.querySelector("#swatches");
customDropdown.addEventListener("click", callDrop);

//GLOBAL VARIABLES
var hexArray = [];

//Establish the text array
  var colors = ["Black", "White", "cyan", "#fa09ca", "#333333", "#009ecf", "purple", "orange", "teal", "yellow","grey", "pink"];
var hexColorArray = ["white","black","white","purple","#009ecf"];

//delays the hex array callback so it is async
    setTimeout(function() {
        hexColorArray.push(hexArray);
        alert(hexColorArray);
    }, 250);

var callDrop = function (result) {  
    //loop for swatch name
    var s = result;
    var myObject = eval('(' + s + ')');
      
    for (i in myObject)
        {
            //set color for each
            var name = myObject[i]["name"];
            //grab the ul swatches
            var ul = document.getElementById("swatches");
            //creates the new li
            var li = document.createElement('li');
            //appending the array to the li
            li.appendChild(document.createTextNode(name));
            //variable to create new div
            const div = document.createElement('div');
            
            //find the class name
            div.className = 'colorBox';
            //pulls the color from the css class to switch the colors
            div.style.backgroundColor = hexColorArray[i];
            
            //appends the color to the li
            li.appendChild(div);
            //appending the li to the ul
            ul.appendChild(li);
        }
    
    /*====================== //selected color to have an active color ========================*/
    $(".swatches li").click(function() {
    $(".swatches li").removeClass('activeColor');
    $(this).addClass('activeColor');
  });   
}

setTimeout(function() {
csInterface.evalScript('swatchIndex()', callDrop);
}, 3000);

/////===============================TEXT BOX ADD COLOR BUTTON========================================////

//Tab 2 textcolor button
var textColorBtn = document.querySelector("#textColorbtn");
textColorBtn.addEventListener("click", textColor);
function textColor() {
    grabSwatchIndex();
    csInterface.evalScript("textColor()");
}

//push the selected value to jsx file
function grabSwatchIndex() {
    var getSelectedValue = document.getElementById(".swatches li");
    var selectedSwatch = $($.find('.activeColor')[0]).index();
    var sender = (selectedSwatch);
      csInterface.evalScript("exportSwatch('"+JSON.stringify(sender)+"')");
}

//////////////Pulling HEX COLORS from JSX////////////////////////
csInterface.evalScript('hexColor()', function(hexArr) {
    var hexArrObj = JSON.parse(hexArr);
    hexArray = hexArrObj;
    for (var i = 0; i < hexArray.length; i++) {
        hexArray[i] = hexArray[i].replace(/"/g, "");
    }     
     alert(hexArray);
});