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

Question

I have tried a few ways now and it only confuses me more, probably still above my knowledge but trying to get the the following to work:

I am pulling in product data from woocommerce and am trying to loop/map over the variations. The end goal is to have a dropdown (or radio buttons or anything really) for each variation as in:

Size: SML

Color: red blue green

Here is the data I get from woocommerce and below, my attempt of getting it to work.

Data:

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

My attempt that currently only outputs:

color

red

M

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

Tried switching around pretty much everything and it just gets more confusing to me so any input would be much appreciated.

Answer 1

Here is one way to do this:

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

It will dynamically create the array of the options and the main idea here is the use of the ES6 reduce and Set which takes care of keeping the values unique.

The last reduce is due to the results coming in a Set form and we are converting them to arrays.