How do I access first element of JSON object array that is in another JSON object array?

Question

I have a react component. It gets a json array.

[
    {
        "itemNumber": "11BRC",
        "itemDescription": "Flat head Phillips Wood screw C-Pak 2x1/4",
        "featured": false,
        "categoryName": "Screws",
        "price": 4.74444444,
        "qtyOnHand": 22409.00000,
        "images": [
            {
                "itemnmbr": "11BRC",
                "fileseq": 16384,
                "filename": "Oval Head Slotted Wood Screws.jpg",
                "imageData": "/9j/4Q4nRXhpZgAATU0AKgAAAAgADAEOAAIAAAAgAAAAngEPAAIAAAASAAAAvgEQAAIAAAAKAAAA0AESAAMAAAABAAEAAAEaAAUAAAABAAAA2gEbAAUAAAABAAAA4gEoAAMAAAABAAIAAAExAAIAAAAgAAAA6gEyAAIAAAAUAAABCgITAAMAAAABAAIAAIdpAAQAAAABAAABIIglAAQAAAABAAADBAAAAxggICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgAE5JS09OIENPUlBPUkFUSU9OAE5JS09OIEQxWAAALcbAAAAnEAAtxsAAACcQQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaAAyMDEyOjA0OjA1IDE0OjI1OjA2AAAAABmCmgAFAAAAAQAAAlKCnQAFAAAAAQAAAlqIIgADAAAAAQABAACQAAAHAAAABDAyMTCQAwACAAAAFAAAAmKQBAACAAAAFAAAAnaRAQAHAAAABAECAwCRAgAFAAAAAQAAAoqSBAAKAAAAAQAAApKSBQAFAAAAAQAAApqSBwADAAAAAQADAACSCgAFAAAAAQAAAqKShgAHAAAAMAAAAqqSkAACAAAAAzE3AACSkQACAAAAAzE3AACSkgACAAAAAzE3AACgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAABzWgAwAEAAAAAQAABBqgBQAEAAAAAQAAAuSiFwADAAAAAQACAACjAAAHAAAAAQMAAACjAQAHAAAAAQEAAACjAgAHAAAACAAAAtoAAAAAAAAACgAABOIAAAAAAAAACjIwMTE6MDM6MTQgMTA6MTA6NTEAMjAxMTowMzoxNCAxMDoxMDo1MQAAAAAEAAAAAQAAAAAAAAAGAAAAAAAAAAoAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAICAQEAAAAAAgABAAIAAAAEUjk4AAACAAcAAAAEMDEwMAAAAAAAAAABAAAAAQAAAAQCAAAAAAAAAAAAAAYBAwADAAAAAQAGAAABGgAFAAAAAQAAA2YBGwAFAAAAAQAAA24BKAADAAAAAQACAAACAQAEAAAAAQAAA3YCAgAEAAAAAQAACqkAAAAAAAAASAAAAAEAAABIAAAAAf/Y/+0ADEFkb2JlX0NNAAH/7gAOQWRvYmUAZIAAAAAB/
...

After reading these StackOverflow questions How to access first element of JSON object array and Access first element of json array (And quite a few more), I made the component render function:

render() {
        const items = this.state.itemList;
        return (
            <table className="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Item Number</th>
                        <th>Item Description</th>
                        <th>Item Image</th>
                    </tr>
                </thead>
                <tbody>
                    {items && items.map (item =>
                        <tr key={item.itemNumber}>
                            <td>{item.itemNumber}</td>
                            <td>{item.itemDescription}</td>
                            <td><img className="fit-picture" src={"data:image/png;base64," + item.images[0].imageData} id={item.itemNumber + "Img"} alt={item.itemNumber} /></td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

... it says that item.images[0] is Undefined. I have even tried Object.keys(item.images)[0].imageData and Object.entries(item.images)[0].imageData with a similar error message each. Would someone care to point out what I am doing wrong?

Answer 1

Some entries in itemList may not have images, which would result in the error you are seeing. To account for such entries, we can use conditional property access.

Try item.images[0]?.imageData in the render, this will short-circuit the execution when images[0] does not exist.

This answer initially asked for JSON.parse(itemList) which is what the top comment is referring to. This was not the issue OP was experiencing.