multi level mapping (.map)

WhyMe 0
Viewed 38

i'm trying to map over an object but I struggle to manage to get the right results

my example array of objects

[
    {
        "round": 1,
        "points": 0,
        "colors": [
            "#c99e15",
            "#b9bbbd",
            "#7C0B2B",
            "#97CC04",
            "#7fffd4"
        ]
    },
    {
        "round": 2,
        "points": 0,
        "colors": [
            "#c99e15",
            "#b9bbbd",
            "#7C0B2B",
            "#476C9B",
            "#ADD9F4"
        ]
    }
]

I'm trying to get a table where I get

ROUND X // POINTS

  1. color 1
  2. color 2
  3. color 3
  4. etc

ROUND X+1 // POINTS

  1. color 1
  2. color 2
  3. color 3
  4. etc

etc

my current code looks likes this, but this unfortunately keeps duplicating the results in "colors" values

<ul>
            {obj.map((round) => (
              <li key={round.round}>{round.round}
                <ul>
            {obj.map((outerElement) =>
            outerElement.colors.map((colors) => (
                <li key={colors} style={{ backgroundColor: colors }}>
                  {colors}
                </li>
              ))
            )}
          </ul>
              </li>
            ))}
          </ul>
array.prototype.map object arrays javascript
1 Answers

I don't know why you obj.map((outerElement) => ...) inside the loop over the same object. you need to map over round.colors

<li key={round.round}>
  {round.round}
  <ul>
    {round.colors.map((color) => (
      <li key={color} style={{ backgroundColor: color }}>
        {color}
      </li>
    ))}
  </ul>
</li>
userptyr0
Related