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?

So do the other mapped items work alright? Is it just item.images that is not working? Also, is itemList the array of objects you have above? — LUKER
– LUKER, Commented Jul 8, 2021 at 19:57
@LUKER thats right. I can comment out that piece and I get a full list with the ALT tag showing. Yes, that is a snipit of my itemList in the example. — Randy
– Randy, Commented Jul 8, 2021 at 19:59
@Randy in that case you want to check if the property exists, and when it doesn't to render something that does not rely on the existence of that property. For starters, that last column can be {!item.images ? null : <td><img ... /></td>}. This code snippet will return null when images is undefined. Alternatively images could be an empty list, this depends on the API spec. If that's the case you can instead check that images.length === 0 ? null : <td><img ... /></td> — Alexei Darmin
– Alexei Darmin, Commented Jul 8, 2021 at 20:27
@Randy Let's see what that data looks like, let's find out which item is throwing this error and how to address that specific item. itemList.map(item => !item.images[0] ? console.log(item) : null) This will console log all items where item.images[0] === undefined. Alternatively you could check that item.images[0] != undefined always. — Alexei Darmin
– Alexei Darmin, Commented Jul 8, 2021 at 21:07
@Randy This log shouldn't raise an error after the fix. Is there anywhere else that is accessing this images property? The error could be complaining about a different place. Also, try item.images[0]?.imageData in the render, this will short-circuit the execution if images[0] does not exist. If it's still erroring, I believe the error is happening elsewhere. — Alexei Darmin
– Alexei Darmin, Commented Jul 8, 2021 at 21:50

Alexei Darmin · Accepted Answer · 2021-07-08 22:23:30Z

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.

edited Jul 8, 2021 at 22:23

answered Jul 8, 2021 at 20:03

Alexei Darmin

2,1691 gold badge20 silver badges31 bronze badges

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

2 Comments

LUKER Over a year ago

Nahh cuz it works fine besides when he goes into the images array.

Alexei Darmin Over a year ago

fair enough, back to the drawing board @LUKER

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related