如何从对象数组中提取数据并将其发送到html元素以实现产品变体？

如何解决如何从对象数组中提取数据并将其发送到html元素以实现产品变体？

我将像这样从数据库中获得一系列产品变体。这是变体的三个级别。我设计数据库的方式是返回的变体看起来像这样。

const variants = [
    {
        baseSKU: "",name:"color",value:"blue",SKU:"78384FB",price: "78",stock: "6"
    },{
        baseSKU: "",value:"red",SKU:"78384FR",price: "48",stock: "8"
    },{
        baseSKU: "78384FR",name:"size",value:"L",SKU:"78384LR",price: "23",stock: "4"
    },SKU:"78384FG",price: "24",stock: "15"
    },]

现在，我希望所有具有baseSKU = "" 的变体在带有单选按钮的变体的顶层。这里是颜色：红色和蓝色。

选择单选按钮之一后，对于所有baseSKU与所选单选按钮相同的变体，将显示为第二级单选按钮。

然后，如果任何变体的baseSKU与第二级单选按钮的SKU相同，则它们将再次出现在所选单选按钮的下方。

然后基于这一点，即，每个按钮被选择时，价格数量和库存数量将发生变化。然后，这些数据应与表单的发布请求一起发送到服务器。

我已经尝试过该无效的html ejs代码。

<div class="page">
    <% if(typeof product != 'undefined'){ %>
    
    
    <div class="single-product-page">
        <img src="/img/products/<%= product.imageCover %>" width="300">
        <a href="/products/<%= product.id%>">
            <h3><%= product.name %></h2>
        </a>
    
        <a href="/categories/<%= product.category.id %>">
                    <p>Category: <%= product.category.name %></p>
                </a>
        <p> <%= product.description %></p>
                <!-- variable codes -->
                <% if(product.variants.length >= 0){ %>
                    <div id="variants" style="display: none;">
                    <%= JSON.stringify(product.variants) %>
                    </div>
                <% } %>
                
                <div id="variable-form">
                    <label id="base-name" style="font-weight: bold;">
                        
                    </label>
                </div>
    
        <p>Price: <span id="price"><%= product.price %></span></p>
        <p>Stock Left:<span id="stock"><%= product.stock %></span></p>
    
        <form action="/add-to-cart" method="POST" enctype="multipart/form-data">
            <label style="display: inline;">Quantity: </label> <input id="quantity" name="quantity" type="number"
                style="width: 40px; display: inline;" max="<%= product.stock %>" min="1" required>
            <input type="hidden" id="product-id" name="product" value="<%= product.id%>">
            <br><br><label>Upload a design of your choice</label><input style="width: 150px;" type="file" id="imageCover" name="imageCover">
            
            <input type="submit" id="add-cart" class="add-cart" value="Add to cart">
            <a id="message-info" href="/cart">Added to cart. Visit cart</a>
        </form>
    
    
    </div>

js代码

    if (document.getElementById('variants')) {
        let variants = JSON.parse(document.getElementById('variants').innerHTML);
        let variableForm = document.getElementById('variable-form');
        let baseName = document.getElementById('base-name');
        let price = document.querySelector('span#price');
        let stock = document.querySelector('span#stock');
        //base radio show
        for (var i = 0; i < variants.length; i++) {
            if (variants[i].base === null || variants[i].base === "") {
                baseName.innerHTML = variants[i].name + ": ";
                variableForm.innerHTML += `<input id="base-radio-${i}" style="width: 40px; display: inline;" type="radio" name="variableName" value="${variants[i].value}"><label style="width: 40px; display: inline;">${variants[i].value}</label>`;
                document.getElementById(`base-radio-${i}`).addEventListener('change',changeContent);
            }
        }
        //base radio functionality
        
        
        function changeContent (){
            console.log('hi');
            
        }
        
    }