Javascript仅使用循环来显示数据数组（并非所有数据数组）

我有一些HTML代码，我想使用循环将数据（API）放入HTML代码中。
每个id都是产品，每个产品都有层，每个层都有一些选项

我的数据如下（API）：

因此，我使用循环来显示数据列表及其层以及选项。（下面是javascript代码）

但问题是，我的代码显示了所有产品（ID）的所有层。换句话说，第一层产品、第二层产品、第三层产品

我只想显示所选的产品层，而不是全部。（例如，如果选择了产品3，则显示产品3的图层和选项，而不是其他产品的图层和选项。）

function selectModel（）{
//此循环创建产品列表
对于（变量i=0；i“+data[i]。name+'-'+data[i]。price+'$'+'”）；
//此循环用于创建产品层
对于（k=0；k

我将示例HTML代码放在上面，以便于查看：

null-0$
产品名称2-147$
产品编号3-50$

1） 空的
2） 产品名称2
3） 产品名称3

我不知道这是否是你想要的，你的问题有点神秘，但这里是：

这个想法是这样的：

开始时，仅将产品呈现为列表

附加一个

单击

处理程序，让用户选择其中一个

在选择时，您迭代所选产品的各个层，并按照您的意愿呈现它们（我使用了您的示例代码，尽管这也不是非常清楚）

---

功能选择（productIdx）{
var product=数据[productIdx]；
var options=product.layers
.map（层=>layer.options[0]）
.map（（层，i）=>{
控制台日志（层）；
返回(`

标签文本

`);
});
$（“#app.selected product”）.html(`
${product.name}

${options}

`);
}
jQuery（文档）.ready（$）=>{
$（“#app.list”）.append（（）=>{
返回数据.map（（产品）=>{
返回(`
${product.name}-${product.price}$
`)
});
});
$（“li.option”）。在（“单击”，函数（）{
$（“li.option”）.removeClass（“选定”）；
$（此）.addClass（“选定”）；
选择（$（this.index（））；
});
});

总而言之，作为个人建议，我认为您不应该为此使用jQuery，但请尝试一些更好的库或框架来处理此类情况。相信我，这将为您节省时间和痛苦

---

您可以在我的代码中看到的另一个广泛使用的建议是，使用它可以使您的代码更具可读性和更易于推理。

应该从哪里选择产品？@Sunyatasattva from`$（'.list'）`part.first循环使用javascript代码，我也在代码段中添加Html代码。

"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"
        }
      ]
    }
  ]
}

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);

        }
    }
}

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() );
  });
});