Обход json с использованием квадратных скобок с jsx

Question

Мне нужна помощь с синтаксисом, пожалуйста, при попытке получить значение из ключа.Учитывая следующий объект json:

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

}

Я могу извлечь значение для ключа "header h1" с помощью следующего jsx

<h2>{record.fields["header h1"]}</h2>

Iсейчас пытаюсь извлечь значение из ключа "URL".Я пробовал следующее.

<img src={records.fields["header figure"]["url"]} />

и

<img src={records.fields["header figure"][0]["url"]} />

Я получаю TypeError: Невозможно прочитать свойство "url" из undefined. Нужна помощь с моим синтаксисом, пожалуйста

• Элемент списка

Answer 1

ваши записи - это массив, также вы должны указать, какую позицию вы хотите прочитать:

Я проверил ваш json с помощью jq:

jq '.records[0].fields["header figure"][0]["url"]' 

поставляет

"https://dl.airtable.com/.attachments/d6c5f674aeb427dd533cd2c60ab2b29f/f2f99dc0/80__clouds.jpg"

и

jq '.records[1].fields["header figure"][0]["url"]'

доставляет

"https://dl.airtable.com/.attachments/67484295777d866d6610ef9f84f8bc53/81ae8e6b/A07.jpg"