pull jsx data to javascript

Hey there,

I have built a dropdown in jsx and js using the html select, but as i went forward i wanted control of a color swatch so i was told to switch to <ul><li> list which works with an array of colors that i test put. I cannot for the life of me have the json parse the right data to this revised list. here is what i have.

HTML:

SELECT A COLOR

<div class="dropdown-container">
  <ul class="swatches" id="swatches">
    <li class="cell">
      NONE
      <div class="colorBox"></div>
      <!--END COLOR BOX-->
    </li>
    <!--END LI-->
  </ul>
  <!--END SWATCHES-->
</div>
<!--END DROPDOWN CONTAINER-->

css:

body {
  padding: 0;
  margin: 0;
  background-color: #333;
  font-family: roboto;
  color: white;
  text-transform: uppercase;
}

.dropdown-container {
  width: 80%;
  height: 200px;
  float: left;
  background-color: #dddddd;
  overflow-y: auto;
  overflow-x: hidden;
}

ul.swatches {
  width: 100%;
  float: left;
  color: #333333;
  list-style-type: none;

}

ul.swatches li {
  width: 80%;
  height: 20px;
  float: left;
  padding-bottom: 5px;
  border-bottom: 1px solid #333333;
  margin: 0 0 10px 0;
  position: relative;
  padding: 0 0 0 0;
}

ul.swatches li:hover {
  background-color: pink;
  cursor: pointer;
}

ul.swatches li .colorBox {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -25px;
  background-color: white;
  border-radius: 50%;
}

js:

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

var callDrop = function (result) {
    
  var swatchesConv = JSON.parse(result);
//Establish the text array
  var colors = ["Black", "White", "Black", "purple", "orange", "teal", "yellow","grey"];
//  var hexColors = [];
  var listItem;

    
    
    
//  loop for text name
//  for (var i = 0; i < colors.length; i++) {
  for (var i = 0; i < swatchesConv.length; i++) {
    //set color for each
    var name = swatchesConv[i];
    //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 the 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 = colors[i];
    //appends the color to the li
    li.appendChild(div);
    //appending the li to the ul 
    ul.appendChild(li);
  }
}
csInterface.evalScript('swatchIndex()', callDrop);

JSX:

//swatch selected
function swatchIndex() {  
    var doc, swatches, json, n, l, swatch;  
    doc = app.activeDocument;  
    swatches = doc.swatches;  
    json = [];  
    l = swatches.length;  
    for (n = 0; n < l; n++) {  
        swatch = swatches[n];  
        json[n] = '"' + n + '": {' +  
            '"name": "' + swatch.name + '"}' 
    }  
    // prepare the JSON as a string  
    json = '{' + json.join(',') + '}';  
    return json;  
}

anyone have any ideas?