Iterating through nested objects in JSON

1

Hello!!

Im trying to access JSON data through an API and display the data in a table. I’ve successfully displayed the data from the JSON object, but cant seem to access the data in the nested object. If i could get any help that would be greatly appreciated!

heres the code!

class CoinList extends Component {

constructor(props) {
    super(props);
    this.state = {
        coinData: [],
    }
}

componentDidMount() {
     fetch('https://api.nomics.com/v1/currencies/ticker?key=' + apiKey +"&interval=1d")
    .then(response => response.json()) 
    .then(data => this.setState({ coinData: data })) 
    .catch(error => {console.error(error)})
  } 

render() {
    return (
        <div className="Table-container">
            <table>
                <thead>
                    <tr>
                        <th> h1 </th>
                        <th> h2 </th>
                    </tr>
                </thead>
                <tbody> 
                    {this.state.coinData.map((coin) =>
                    <tr key={coin.id}> 
                        <td> {coin.currency} </td>
                        <td> {coin.rank} </td>
                    </tr>
                 
                    )}
                </tbody>
            </table>
        </div>
    )
}

}

and here is the JSON data
21%20PM

2

Hi there,
Any chance you can copy the code (minus the api key)? I have a feeling I know what’s wrong, but I’m still not a JS expert so I don’t want to send you down the wrong path :slight_smile:

Cheers

5

ok ive added the code :slight_smile:

7

I know i have to use nested map functions, but when i do so i get a “TypeError: this.state.coinData[0].map is not a function” , and i am running the code locally

render() {
    return (
        <div className="Table-container">
            <table>
                <thead>
                    <tr>
                        <th> h1 </th>
                        <th> h2 </th>
                    </tr>
                </thead>
                <tbody> 
                    {this.state.coinData.map((coin) =>
                    <tr key={coin.id}> 
                        <td> {coin.currency} </td>
                        <td> {coin.rank} </td>
                        <td> {this.state.coinData[0].map((subItem) => <td> {subItem.volume} </td> )} </td>
                    </tr>
                        
                    )}
                </tbody>
            </table>
        </div>
    )
}
9

oops it was supposed to be coin[1d].map((subItem) =>

{subItem.volume} ) cause i was tryna get the 1d volume in the nested object
11

I was talking about the nestes object 1d in the json data lol.

14

I’m even more lost now