Displaying JSON data using Fetch API and map() in Javascript/Reactjs
<p>I have been trying to grab json data from an API and display it using the map() function. Unfortunately the API returns data in the format: { "type": ..., "value": ... }. The second object <em>value</em> contains an array with the data I want to access.</p>

<p>Is there a way I can access (or single out) JUST the second object in the API? and then I can run map() on it. See code below. This currently returns the error: <strong>this.state.jokes.map is not a function</strong></p>

<p>P.S. the code works pefectly on APIs wrapped in an array e.g. <a href="http://jsonplaceholder.typicode.com/posts" rel="nofollow noreferrer">http://jsonplaceholder.typicode.com/posts</a></p>

<pre><code>class JokeList extends React.Component {

    constructor() {
        super();
        this.state = {jokes:[]};

    }

    componentDidMount() {
        fetch(`http://api.icndb.com/jokes`)
            .then(result =&gt; result.json())
            .then(jokes =&gt; this.setState({jokes}))
    }

    render () {

        return (
            &lt;div&gt; 
                {this.state.jokes.map(joke =&gt; 
                       &lt;div key={joke.id}&gt; {joke.joke} &lt;/div&gt;)}
            &lt;/div&gt;
        );
    }
}
</code></pre>