Hello all,
I have been attempting to practice iterating over arrays and objects in React and am having trouble in particular with mapping a nested JSON object into a html table. I always get ‘not iterable error’ or no return at all. Can anyone give me some advice or a starting point for what I am attempting to do (push a JSON object to state via api and map state out to an html table). Any help would be appreciated - been trying to work this out for a few days.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
key: "KOS1RXP2ZUGW0XKIKVNYZBK4ZJAZP5KB",
ticker: "RKT",
strikeCount: "5",
strategy: "ANALYTICAL",
startDate: "2021-08-30",
endDate: "2021-09-30",
data: []
//count: 1
};
}
updateTable = () => {
const request = `https://api.tdameritrade.com/v1/marketdata/chains?apikey=${this.state.key}&symbol=${this.state.ticker}&strikeCount=${this.state.strikeCount}&strategy=${this.state.strategy}&fromDate=${this.state.startDate}&toDate=${this.state.endDate}`;
fetch(request)
.then((response) => response.json())
.then((data) => display(data));
let display = (data) => {
this.setState({
data: [{ ...data.callExpDateMap }]
});
};
};
componentDidMount() {
this.updateTable();
}
// componentDidMount() {
// this.intervalId = setInterval(this.updateTable, 1000);
//}
//componentWillUnmount() {
// clearInterval(this.intervalId);
//}
render() {
console.log(this.state.data);
return (
<div>
<table>
<tr>
<th>Date</th> {/*Need multiple dates into separate columns}*/}
<th>Bid</th>
<th>Ask</th>
</tr>
<tr>
{" "}
{/*Need new row for each data point*/}
<td>Strike</td>
<td>Bid</td>
<td>Ask</td>
</tr>
</table>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("data"));