在单个 JSON 文件中循环多个 arrays (Vanilla JS)

Question

我正在尝试使用我创建的 JSON 文件中的数据填充我的 HTML 模板。 但是，我在该文件中有两个不同的 arrays，每个都包含多个对象，我不知道如何循环它们，因为我需要在单独的函数中循环它们。

如果我在 JSON 文件中有一个大数组（“产品”是我正在循环的数组），我在下面提供的 JS 代码可以工作，问题是我需要循环通过“玻璃”和“木头” " arrays 单独（在不同的功能中）。 理想情况下，下面的 JS 片段会循环遍历“wood”数组。

我以前只从一个大数组中获取过，所以我真的不知道如何解决这个问题。 我知道这一定是非常简单的事情，但我被困住了，我会很感激我能得到的任何提示。 提前致谢。

JS文件：

function init() {
if (window.location.href.includes("wood")) {
    fetchJson();
  }
}
function fetchJson() {
  fetch("products.json")
    .then((res) => res.json())
    .then(getWoodGallery(product));
}
function getWoodGallery(product) {
  product.forEach(showWoodGallery);
}
/*--- display wood products ---*/
function showWoodGallery(product) {
  console.log(product);
  const woodTemplate = document.querySelector("#woodGalleryTemplate").content;
  const woodTemplateCopy = woodTemplate.cloneNode(true);
  const woodList = document.querySelector("#woodList");

  woodTemplateCopy.querySelector("h2.name").textContent =
    "Name: " + `${product.wood}`;
  woodTemplateCopy.querySelector("p.dimensions").textContent =
    "Dimensions: " + `${product.dimensions}`;
  woodTemplateCopy.querySelector("h3.price").textContent =
    "Price: " + `${product.price}`;
  woodTemplateCopy.querySelector(".btn").textContent = `Buy Now`;

  woodList.appendChild(woodTemplateCopy);
}

JSON 文件：

{
  "wood": [
    {
      "id": "1",
      "image": "http://mauriciolondono.be/wp/wp-content/uploads/2020/01/animales_1.jpeg",
      "name": "Butterfly",
      "dimensions": "30 x 45cm",
      "price": 40,
      "btn": ""
    },
    {
      "id": "19",
      "image": "http://mauriciolondono.be/wp/wp-content/uploads/2020/01/symmetry_4.jpeg",
      "name": "Escher deconstructed",
      "dimensions": "30 x 45cm",
      "price": 20,
      "btn": ""
    }
  ],
  "glass": [
    {
      "id": "20",
      "image": "http://mauriciolondono.be/wp/wp-content/uploads/2020/01/vidrio_17.jpeg",
      "name": "Juntos pero no revueltos",
      "dimensions": "30 x 45cm",
      "price": 20,
      "btn": ""
    },
    {
      "id": "21",
      "image": "http://mauriciolondono.be/wp/wp-content/uploads/2020/01/vidrio_11.jpeg",
      "name": "White & green",
      "dimensions": "30 x 45cm",
      "price": 20,
      "btn": ""
    }
  ]
}

Answer 1

您只需要遍历 JSON 对象键并有条件地运行您需要为该特定键运行的 function。

function parse(payload) {
   Object.keys(payload).forEach((key) => {
        switch(key) {
           case 'wood':
             handleWood(payload[key]);
             break;
           case 'glass':
              handleGlass(payload[key]);
              break;
            // so on... 
        }
   })

}

在这里， Object.keys将为您提供 object 的所有键的数组。 然后，我们使用forEach遍历返回的数组，为每次迭代运行回调。 在回调中，我们只是匹配密钥并运行所需的 function。