Traversing json using with square brackets with jsx - json

Question

I need some help with my syntax please in trying to get thevalue from a key. Given the following json object:
{
"records": [
{
"id": "recD17v5uIGpA7jYU",
"fields": {
"header h1": "Clouds",
"Email": 1,
"header figure": [
{
"id": "attmeLF6GWqLF3iOS",
"url": "https://dl.airtable.com/.attachments/d6c5f674aeb427dd533cd2c60ab2b29f/f2f99dc0/80__clouds.jpg",
"filename": "80__clouds.jpg",
"size": 2334688,
"type": "image/jpeg",
"thumbnails": {
"small": {
"url": "https://dl.airtable.com/.attachmentThumbnails/7c3dc033b1a7f77fcdeddb2f594a1feb/9a93ab8d",
"width": 36,
"height": 36
},
"large": {
"url": "https://dl.airtable.com/.attachmentThumbnails/6145b560b5c807787814fcf9b39e6130/0f7d0049",
"width": 519,
"height": 512
},
"full": {
"url": "https://dl.airtable.com/.attachmentThumbnails/ecebeb4705ba5531744d556242ddc081/20e10b2a",
"width": 2121,
"height": 2094
}
}
}
]
},
"createdTime": "2019-02-12T09:53:52.000Z"
},
{
"id": "recXiwDKIMSiGd2fn",
"fields": {
"header h1": "People",
"Email": 2,
"header figure": [
{
"id": "attr1iy10UnygtRx0",
"url": "https://dl.airtable.com/.attachments/67484295777d866d6610ef9f84f8bc53/81ae8e6b/A07.jpg",
"filename": "A07.jpg",
"size": 1014718,
"type": "image/jpeg",
"thumbnails": {
"small": {
"url": "https://dl.airtable.com/.attachmentThumbnails/786cc58d3f5b82f4a8414d89b5ea48fb/4a214afc",
"width": 14,
"height": 36
},
"large": {
"url": "https://dl.airtable.com/.attachmentThumbnails/3cb6be2be2b42be2c240f4f2bb9b7901/3bf2b62b",
"width": 512,
"height": 1288
},
"full": {
"url": "https://dl.airtable.com/.attachmentThumbnails/4e56dafdcf39da1f35c1e2f9e96fda6c/07d91945",
"width": 800,
"height": 2013
}
}
}
]
},
"createdTime": "2019-02-12T09:53:52.000Z"
},
{
"id": "recvSJHL3EkSBprs9",
"fields": {
"Email": 3
},
"createdTime": "2019-02-12T09:53:52.000Z"
}
],
"offset": "recvSJHL3EkSBprs9"
}
I'm able to extract the value for "header h1" key with the following jsx
<h2>{record.fields["header h1"]}</h2>
I'm now trying to extract the value from the "url" key. I've tried the following.
<img src={records.fields["header figure"]["url"]} />
and
<img src={records.fields["header figure"][0]["url"]} />
I'm getting TypeError: Cannot read property "url" of undefined.Need some help with my syntax please
List item

Answer 1

your records is an array, also you must specify wich position you want to read:
I tested your json with jq:
jq '.records[0].fields["header figure"][0]["url"]'
delivers
"https://dl.airtable.com/.attachments/d6c5f674aeb427dd533cd2c60ab2b29f/f2f99dc0/80__clouds.jpg"
and
jq '.records[1].fields["header figure"][0]["url"]'
delivers
"https://dl.airtable.com/.attachments/67484295777d866d6610ef9f84f8bc53/81ae8e6b/A07.jpg"