Iterating through nested objects in JSON

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

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

@kev99 The actual code (not screenshot) would be much better. Do you see any errors showing in the browser console?

ok ive added the code :slight_smile:

Are you running this code from a website or locally?

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>
    )
}

What exactly do you think this.state.coinData[0] contains in the above? This would be applied to each iteration of the first map. What are you trying to accomplish with the above?

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

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

The 1d property is not an array (and sometimes there is not even a 1d property in an object of the coinData array). Also, you may want to refresh your memory on how to properly reference object property names with square brackets.

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

That is exactly what I am talking about.

I’m even more lost now

@kev99 What part of my reply (2nd to last) do you not understand? I will do my best to explain if you can let me know what confuses you about what I stated.