Map through array that includes object

Question

Below is the response coming back. I'm trying to map through the logo object so that I can grab the url, however my implementation on Object.keys is not working. What am I doing wrong?

[
  {
    "title": "Header",
    "logo": {
      "metadata": {},
      "sys": {},
      "fields": {
        "title": "Logo",
        "file": {
          "url": "xxxxxx",
          "details": {},
          "fileName": "logo.png",
          "contentType": "image/png"
        }
      }
    },
    "links": []
  }
]

{Object.keys(header.logo.fields.file).map((logo) => (
    <p>{logo.url}</p>
))}

assuming header is the thing you show us above your code, that's an array not an object, so you need header[0].logo.fields.file etc — Robin Zigmond
– Robin Zigmond, Commented Apr 26, 2022 at 19:15
Although that's not the only problem in your expression, based on the data you show us, and it's really not clear what you want to be returned. — Robin Zigmond
– Robin Zigmond, Commented Apr 26, 2022 at 19:16
Object.keys iterates through all the keys in the object, so your map inner function receives the values "url", "details", "fileName" and "contentType" - none of those strings have a .url property (they are just strings). — James
– James, Commented Apr 26, 2022 at 19:17
Sorry I should have stated what I'm trying to return back, but essentially it's the value of the keyname 'url' — The Interactive DOM
– The Interactive DOM, Commented Apr 26, 2022 at 19:31

codemode · Accepted Answer · 2022-04-26 19:17:44Z

1

Assuming the top-level array name is header, just do this. Note that the top-level structure is an array, so you need an index to get the object inside.

<p>{header[0].logo.fields.file.url}</p>

answered Apr 26, 2022 at 19:17

codemode

4983 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Map through array that includes object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related