Displaying JSON data using Fetch API and map() in Javascript/Reactjs

Question

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 value contains an array with the data I want to access.

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: this.state.jokes.map is not a function

P.S. the code works pefectly on APIs wrapped in an array e.g. http://jsonplaceholder.typicode.com/posts

class JokeList extends React.Component {

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

    }

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

    render () {

        return (
            <div> 
                {this.state.jokes.map(joke => 
                       <div key={joke.id}> {joke.joke} </div>)}
            </div>
        );
    }
}

Jed Fox · Accepted Answer · 2016-12-01 21:52:13Z

8

Try using

fetch(`http://api.icndb.com/jokes`)
    .then(result => result.json())
    .then(jokes => this.setState({jokes: jokes.value}))

instead.

This is because the response from the API is like this:

{
  "type": "...",
  "value": [the value you want],
}

You want the value of the value key, because that’s what you’re using later.

answered Dec 1, 2016 at 21:52

Jed Fox

3,0255 gold badges31 silver badges38 bronze badges

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

Comments

Kristian · Accepted Answer · 2021-05-28 18:52:23Z

0

class JokeList extends React.Component {

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

    }

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

    render () {

        return (
            <div> 
                {this.state.jokes.map(joke => 
                       <div key={joke.id}> {joke.joke} </div>)}
            </div>
        );
    }
}

edited May 28, 2021 at 18:52

Kristian

2,4518 gold badges27 silver badges26 bronze badges

answered May 28, 2021 at 15:40

IT-ACADMY

1

Collectives™ on Stack Overflow

Displaying JSON data using Fetch API and map() in Javascript/Reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related