Displaying JSON data using Fetch API and map() in JavascriptReactjs - Stack Overflow

admin管理员组

文章数量:1287626

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.

class JokeList extends React.Component {

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

    }

    ponentDidMount() {
        fetch(``)
            .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>
        );
    }
}

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./posts

class JokeList extends React.Component {

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

    }

    ponentDidMount() {
        fetch(`http://api.icndb./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>
        );
    }
}

• javascript
• json
• rest
• reactjs

Share Improve this question Follow asked Dec 1, 2016 at 18:58 ChrisChris 38211 gold badge44 silver badges1616 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Try using

fetch(`http://api.icndb./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.

class JokeList extends React.Component {

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

    }

    ponentDidMount() {
        fetch(`http://api.icndb./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>
        );
    }
}

本文标签： Displaying JSON data using Fetch API and map() in JavascriptReactjsStack Overflow