在嵌套数组中映射/循环反应

Question

我现在已经尝试了几种方法，但这只会使我更加困惑，可能仍然超出我的知识范围，但是试图使以下各项起作用：

我从woocommerce提取产品数据，并试图循环/映射变化。 最终目标是为每个变体创建一个下拉列表（或单选按钮或其他任何东西），如下所示：

尺码：SML

颜色：红色蓝色绿色

这是我从woocommerce及以下获得的数据，我试图使其工作。

数据：

{
  "data": {
    "allWcProducts": {
      "edges": [
        {
          "node": {
            "variations": [
              {
                "id": 14,
                "attributes": [
                  {
                    "name": "color",
                    "option": "red"
                  },
                  {
                    "name": "size",
                    "option": "S"
                  }
                ]
              },
              {
                "id": 15,
                "attributes": [
                  {
                    "name": "color",
                    "option": "red"
                  },
                  {
                    "name": "size",
                    "option": "M"
                  }
                ]
              },
              {
                "id": 16,
                "attributes": [
                  {
                    "name": "color",
                    "option": "red"
                  },
                  {
                    "name": "size",
                    "option": "L"
                  }
                ]
              },
              {
                "id": 17,
                "attributes": [
                  {
                    "name": "color",
                    "option": "blue"
                  },
                  {
                    "name": "size",
                    "option": "S"
                  }
                ]
              },
              {
                "id": 18,
                "attributes": [
                  {
                    "name": "color",
                    "option": "blue"
                  },
                  {
                    "name": "size",
                    "option": "M"
                  }
                ]
              },
              {
                "id": 19,
                "attributes": [
                  {
                    "name": "color",
                    "option": "blue"
                  },
                  {
                    "name": "size",
                    "option": "L"
                  }
                ]
              },
              {
                "id": 20,
                "attributes": [
                  {
                    "name": "color",
                    "option": "green"
                  },
                  {
                    "name": "size",
                    "option": "S"
                  }
                ]
              },
              {
                "id": 21,
                "attributes": [
                  {
                    "name": "color",
                    "option": "green"
                  },
                  {
                    "name": "size",
                    "option": "M"
                  }
                ]
              },
              {
                "id": 22,
                "attributes": [
                  {
                    "name": "color",
                    "option": "green"
                  },
                  {
                    "name": "size",
                    "option": "L"
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }
}

我目前仅输出的尝试：

颜色

红色

中号

.....
    const post = this.props.data.wcProducts
......
{
  post.variations.map((variations, i) => (
    <div key={`${post.variations} ${i}`}>
      <p>{post.variations[i].attributes[0].name}</p>

      {post.variations[i].attributes.map((wcProducts, i) => (
        <div key={`${post.variations} ${i}`}>
          <p>{post.variations[i].attributes[i].option}</p>
        </div>
      ))}
    </div>
  ));
}

尝试切换几乎所有内容，这让我感到更加困惑，因此任何输入将不胜感激。

Answer 1

这是执行此操作的一种方法：

 const data = { "allWcProducts": { "edges": [ { "node": { "variations": [ { "id": 14, "attributes": [ { "name": "color", "option": "red" }, { "name": "size", "option": "S" } ] }, { "id": 15, "attributes": [ { "name": "color", "option": "red" }, { "name": "size", "option": "M" } ] }, { "id": 16, "attributes": [ { "name": "color", "option": "red" }, { "name": "size", "option": "L" } ] }, { "id": 17, "attributes": [ { "name": "color", "option": "blue" }, { "name": "size", "option": "S" } ] }, { "id": 18, "attributes": [ { "name": "color", "option": "blue" }, { "name": "size", "option": "M" } ] }, { "id": 19, "attributes": [ { "name": "color", "option": "blue" }, { "name": "size", "option": "L" } ] }, { "id": 20, "attributes": [ { "name": "color", "option": "green" }, { "name": "size", "option": "S" } ] }, { "id": 21, "attributes": [ { "name": "color", "option": "green" }, { "name": "size", "option": "M" } ] }, { "id": 22, "attributes": [ { "name": "color", "option": "green" }, { "name": "size", "option": "L" } ] } ] } } ] } } const getOptions = data => { const result = data.allWcProducts.edges.reduce((r,{node}) => node.variations.forEach(({attributes}) => attributes.forEach(({name, option}) => r[name] ? r[name].add(option) : r[name] = new Set([option]))) || r, {}) return Object.entries(result).reduce((r, c) => (r[c[0]] = [...c[1]]) && r, {}) } console.log(getOptions(data)) 

它将动态创建选项的数组，这里的主要思想是使用ES6 reduce和Set来保持值的唯一性。

最后一个reduce是由于结果以Set形式出现，我们将它们转换为数组。