Iterate over array nested in inside an array of objects?

Question

I got the following json:

{
  "nodes": [
    {
      "variants": {
        "nodes": [
          {
            "id": "98765",
            "title": "Gold",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "EUR"
            }
          },
          {
            "id": "65543",
            "title": "Silver",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "EUR"
            }
          },
          {
            "id": "12345",
            "title": "Gold",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "SEK"
            }
          },
          {
            "id": "11122",
            "title": "Black",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "EUR"
            }
          }
        ]
      }
    }
  ]
}

I have a hard time using .map or .forEach because .map just re-creates the array all the time.

How can I render the id, title, pricev2 part inside JSX?

Eg {product.title}, {product.priceV2}

I tried

products.map((product) => {
  return product.nodes
})

Then what?

Then map the result.variants again ?! Just check what is the returned value, console log it — Oki
– Oki, Commented Sep 1, 2022 at 13:57
Can't tell if there will ever be more than one element in the outer nodes array, or if the only property of the element will be variants. You could try products.nodes[0].variants.nodes.map(...) if not. — James
– James, Commented Sep 1, 2022 at 13:59

Mina · Accepted Answer · 2022-09-01 14:02:15Z

You can use flatMap to flat the mapped array from variants nodes.

const products  = {
  "nodes": [
    {
      "variants": {
        "nodes": [
          {
            "id": "98765",
            "title": "Gold",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "EUR"
            }
          },
          {
            "id": "65543",
            "title": "Silver",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "EUR"
            }
          },
          {
            "id": "12345",
            "title": "Gold",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "SEK"
            }
          },
          {
            "id": "11122",
            "title": "Black",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "EUR"
            }
          }
        ]
      }
    }
  ]
}

const result = products.nodes.flatMap((product) => product.variants.nodes)

console.log(result)

pilchard · Accepted Answer · 2022-09-02 08:15:41Z

Arguably each node could be considered a product with variants (even though your data only contains one element right now) so a nested map seems appropriate.

const data = {
  "nodes": [
    {
      "variants": {
        "nodes": [
          {
            "id": "98765",
            "title": "Gold",
            "priceV2": {
              "amount": "95.0",
              "currencyCode": "EUR"
            }
          },
          ...
        ]
      }
    }
  ]
}

return (
  <>
    {data.nodes.map((product, i) => (
      <div key={i}>
        {product.variants.nodes.map(variant => (
          <div key={variant.id}>
            <p>{variant.title}, {variant.priceV2.amount}</p>
          </div>
        ))}
      </div>
    ))}
  </>
)

Collectives™ on Stack Overflow

Iterate over array nested in inside an array of objects?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related