React - map over nested json not in an array

Question

I am trying to map over some json data which looks like this...

"array": [
        {
            "controlPanel": "00000000-0000-0000-0000-000000000000",
            "lastArmed": "2016-10-31T19:36:19.3943138",
            "lastDisarmed": "2017-02-04T22:50:47.3528838",
            "panelDateTime": "2019-10-14T09:00:31.0908467",
            "mainsConnected": false,
            "mainsLastActivated": "2017-04-19T04:53:47.9033877",
            "tamperStatus": "0",
            "activeFaults": "TwoW, AC, BP, DF, LV, NF, OP, SR",
            "battery": {
                "voltage": 0.0,
                "current": 0
            },
            "system": {
                "voltage": 6.515163,
                "current": 1547
            },
            "aux12V": {
                "voltage": 2.767401,
                "current": 119
            },
            "bell": {
                "voltage": 14.019639,
                "current": 405
            },
            "network": null,
            "temperature": 68.538864,
            "id": "fd14f8da-2175-e75d-e2a2-00647f9d3884"
        },

I keep getting TypeError: Cannot read property 'map' of undefined when doing this...

                        {this.state.controlPanelStatus.battery.map((b, bix) => (
                        <tr key={bix}>
                            <th>Battery Voltage (V)</th>
                            <td>{b.voltage}</td>
                            <td>Pass</td>
                            <td>10.5V&lt;&gt;14.5V</td>
                        </tr>
                        ))}

My state is defined like this...

class ControlPanelDetail extends React.Component {
    constructor(props) {
        super(props);
        this.timeIncrementMs = 50;
        this.showSpinnerIfReturnGreaterThanMs = 200;
        this.state = {
            loading: false,
            controlPanel: [],
            controlPanelStatus: [
                {
                    "battery": {
                        "voltage": '',
                        "current": ''
                    },
                    "system": {
                        "voltage": '',
                        "current": ''
                    },
                    "aux12V": {
                        "voltage": '',
                        "current": ''
                    },
                    "bell": {
                        "voltage": '',
                        "current": ''
                    },
                }
            ],
            toggledClearRows: false
        }
    }

and I am just loading the first entry from the api like this...

fetch('/api/controlpanelstatus')
    .then(res => res.json())
    .then(cp => {
        this.setState({
            controlPanelStatus: cp.array[0],
            isLoading: false
        });
        console.log(this.state.controlPanelStatus)
    })
    .catch(error => {
        if (error.response) {
            console.log(error.responderEnd);
        }
    });

all the data is loading correctly aprt from the nested json which im trying to map over. What am i doing wrong here? Is it because the json is not nested as an array eg []? Thanks.

controlPanelStatus is an array and it doesn't contain the property battery. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 15, 2019 at 14:59
@PraveenKumarPurushothaman I have updated the state in my code. something like this? Still getting same error. TypeError: Cannot read property 'map' of undefined — Steven Collins
– Steven Collins, Commented Oct 15, 2019 at 15:04
Yes, still, you can see that it's an array. Your rendering code is wrong. You have to map through each controlPanelStatus item to get the battery value. controlPanelStatus is an array of objects containing the battery value. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 15, 2019 at 15:05
Can you create a CodeSandbox.io to show with that mock state? I can help you with the right code. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 15, 2019 at 15:09
like this? {this.state.controlPanelStatus.map((b, bix) => ( <div key={bix}> <tr> <th>Battery Voltage (V)</th> <td>{b.battery.voltage}</td> <td>Pass</td> <td>{b.battery.current}</td> </tr> — Steven Collins
– Steven Collins, Commented Oct 15, 2019 at 15:11

Praveen Kumar Purushothaman · Accepted Answer · 2019-10-15 15:20:27Z

2

I changed your code here at the .map() function. All I did was an exception handling at run time.

{
  this.state.controlPanelStatus &&
    this.state.controlPanelStatus.map((b, bix) => (
      <div key={bix}>
        // ...
      </div>
    ));
}

answered Oct 15, 2019 at 15:20

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

5 Comments

Steven Collins Over a year ago

This works now but only when I change controlPanelStatus: cp.array[0], to controlPanelStatus: cp.array. I just wanted to test with the first entry in api but looks like the map function only works when loading all the data from api. I guess ill have to pass in the id to do this properly.

Praveen Kumar Purushothaman Over a year ago

That could be something... But my one suggestion would be please split your code as unit as possible... It's now everything in a single file.

Praveen Kumar Purushothaman Over a year ago

@StevenCollins Also let me know if you need any help in anything further. Happy to help you.

Steven Collins Over a year ago

I was wondering if you could help with this routing/express server issue? Thanks. stackoverflow.com/questions/58489381/…

Praveen Kumar Purushothaman Over a year ago

@StevenCollins Lemme check.

Collectives™ on Stack Overflow

React - map over nested json not in an array

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related