Javascript использует циклы только для отображения массивов данных (не все массивы данных)

Question

У меня есть некоторый HTML-код, который я хочу поместить данные (API) в HTML-код с помощью циклов.
Каждый идентификатор является Продуктом , а каждый продукт имеет слоев , а каждый слой имеет некоторое значение варианты .

Мои данные похожи (API):

"data": [
{
  "id": 1,
  "name": null,
  "price": 0,
  "layers": [

  ]
},
{
  "id": 2,
  "name": "Product Name 2",
  "price": 147,
  "layers": [
    {
      "name": "Layer One for prodct 2",
      "options": [
                    {
          "image": "image-layer-00.jpg",
          "hex": "EFEFEF"
        }
      ]
    },
    {
      "name": "Layer Two for product 2",
      "options": [
        {
          "image": "image-layer-11.jpg",
          "hex": "FFF"
        }
      ]
    }
  ]
},
{
  "id": 3,
  "name": "Product Number 3",
  "price": 50,
  "layers": [
    {
      "name": "Layer One for Product 3",
      "options": [
        {
          "image": "image-layer1.jpg",
          "hex": "000"
        }
      ]
    },
    {
      "name": "Layer Two for Product 3",
      "options": [
        {
          "image": "image-layer2.jpg",
          "hex": "fff"
        }
      ]
    },
    {
      "name": "Layer Three for Product 3",
      "options": [
        {
          "image": "image-layer3.jpg",
          "hex": "3A3A3A"
        }
      ]
    }
  ]
}

Поэтому я использовал цикл для отображения списка данных и его слоев, а также параметров. (код JavaScript ниже)

Но проблема в том, что мой код показывает все уровни всех продуктов (идентификаторов). Другими словами, слои продукта номер один, продукт номер два, продукт номер три ...

Я хочу отобразить только выбранные слои продукта, а не все. (например, если был выбран продукт 3, поэтому показывайте слои и параметры продукта 3, а не слои и параметры других продуктов.)

function selectModel() {

// This loop create Products List
for (var i = 0; i < data.length; i++) {

    $('.list').append('<li data-value="/' + "URL" + '" class="option">' + data[i].name + ' - ' + data[i].price + '$' + '</li>');

    // This loop create Products Layers
    for (k = 0; k < data[i].layers.length; k++) {

        var layersName = data[i].layers[k].name;

        var layersListCode = `<div class="head-title" id="part-${k}">
        <h3 id="title-${k}">${k}) ${layersName}:</h3>
        <div class="colors" attr-number="${k}"> </div> </div>`;

        document.getElementById("product-layers").insertAdjacentHTML("afterbegin", layersListCode);

        // This loop create Options of Layer
        for (j = 0; j < data[i].layers[k].options.length; j++) {

            var optionHex = data[i].layers[k].options[j].hex;

            var optionsListCode = `
            <div>
            <input type="radio" data-image="blue-0" id="blue-0" name="blue-0" value="blue-0">
            <label for="blue-0"><span style="background-color: #${optionHex}"></span></label>
            </div>`;

            document.querySelector(".colors").insertAdjacentHTML("afterbegin", optionsListCode);

        }
    }
}

Я поместил приведенный выше пример HTML-кода, чтобы его было легче увидеть:

<!--- Product List -->
<ul class="list">
    <li data-value="/URL" class="option">null - 0$ </li>
    <li data-value="/URL" class="option">Product Name 2 - 147$</li>
    <li data-value="/URL" class="option selected">Product Number 3 - 50$</li>
</ul>


<div id="product-layers">

    <!-- Layers-->
    <div class="head-title" id="part-1">
        <h3 id="title-1">1) Null </h3>
        <div class="colors" attr-number="1">
            <!---  Options -->
        </div>
    </div>

    <!-- Layers-->
    <div class="head-title" id="part-2">
        <h3 id="title-2">2) Product Name 2 </h3>
        <div class="colors" attr-number="2">
            <!---  Options -->
            <div>
                <input type="radio" data-image="blue-2" id="blue-2" name="blue-2" value="blue-2">
                <label for="blue-2"><span style="background-color: #EFEFEF"></span></label>
            </div>
            <div>
                <input type="radio" data-image="blue-2" id="blue-2" name="blue-2" value="blue-2">
                <label for="blue-2"><span style="background-color: #fff"></span></label>
            </div>
        </div>
    </div>

    <!-- Layers-->
    <div class="head-title" id="part-3">
        <h3 id="title-3">3) Product Name 3 </h3>
        <div class="colors" attr-number="3">

            <!---  Options -->
            <div>
                <input type="radio" data-image="blue-3" id="blue-3" name="blue-3" value="blue-3">
                <label for="blue-3"><span style="background-color: #000"></span></label>
            </div>
            <div>
                <input type="radio" data-image="blue-3" id="blue-3" name="blue-3" value="blue-3">
                <label for="blue-3"><span style="background-color: #fff"></span></label>
            </div>
            <div>
                <input type="radio" data-image="blue-3" id="blue-3" name="blue-3" value="blue-3">
                <label for="blue-3"><span style="background-color: #3A3A3A"></span></label>
            </div>
        </div>
    </div>
    
</div>

Answer 1

Я не знаю, если это то, что вы хотели, ваш вопрос несколько загадочный, но вот он:

Рабочий пример

Идея примерно такая:

1. В начале вы отображаете только продукты в виде списка.
2. Вы прикрепляете clickобработчик, позволяющий пользователю выбрать один из них.
3. При выделении вы перебираете слои выбранного продукта и визуализируете их по своему желанию (я использовал ваш пример кода, хотя это было не совсем понятнолибо);

---

function select(productIdx) {
  var product = data[productIdx];
  var options = product.layers
    .map(layer => layer.options[0])
    .map((layer, i) => {
        console.log(layer);
      return (`
        <li>
          <input type="radio" id="blue-${i}" name="blue-${i}" value="blue-${i}">
          <label for="blue-${i}">
            <span style="background-color: #${layer.hex}">Label text</span>
          </label>
        </li>
      `);
    });

  $("#app .selected-product").html(`
    <h3>${product.name}</h3>
    <ul class="options">
      ${options}
    </ul>
  `);
}

jQuery(document).ready(($) => {
  $("#app .list").append(() => {
    return data.map((product) => {
      return (`
        <li data-value="/URL" class="option">${product.name} - ${product.price}$</li>
      `)
    });
  });

  $("li.option").on("click", function() {
    $("li.option").removeClass("selected");
    $(this).addClass("selected");

    select( $(this).index() );
  });
});

В целом, как личное предложение, я не думаю, что вам следует использовать jQuery для этого, но попробуйте какую-нибудь лучшую библиотеку или инфраструктуру для обработки таких случаев. ,Поверьте, это сэкономит ваше время и боль.

Еще одно предположение, которое вы можете широко использовать в моем коде, - это использование литералов шаблона , чтобы сделать ваш код более читабельным и понятным. с.