在带有jsx的方括号中使用遍历json

时间:2019-02-17 15:05:40

标签: json jsx

在尝试从键中获取值时,请使用语法方面的帮助。给定以下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"

}

我可以使用以下jsx提取“ header h1”键的值

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

我现在正尝试从“ url”键中提取值。我尝试了以下方法。

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

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

我收到TypeError:无法读取未定义的属性“ url”。请对我的语法进行一些帮助

  • 列表项

1 个答案:

答案 0 :(得分:0)

您的记录是一个数组,还必须指定要读取的位置:

我用jq测试了您的json:

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"