Get answers from API request as array

Question

I'm trying to make an API request and display them, I think that I have to render them as array but have problems with this. Here is my code

      class RecipesList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        searchResult: ''
      };
    }
    componentDidMount() {
      fetch('https://api.edamam.com/search?q=chicken&app_id=ec279fce&app_key=51017bcd32e69bcb0cc8b5f99e8783ca')
      .then(resp => resp.json())
      .then(resp => this.setState({searchResult: resp})
      );
    }
    render() {
      return <div>{this.state.searchResult}</div>  //???
    }
  }

  class App extends React.Component {
    render() {
      return <RecipesList/>;
    }
  }

  ReactDOM.render(
    <App/>, document.querySelector('#app'));

can you show searchResult data that you are getting in api response ? — Mayank Shukla
– Mayank Shukla, Commented May 10, 2017 at 10:33
its a object with many arrays, what you want to render in this ? — Mayank Shukla
– Mayank Shukla, Commented May 10, 2017 at 10:53

thinhvo0108 · Accepted Answer · 2017-05-10 11:04:07Z

If you just want to see your data, just do:

componentDidMount() {
  fetch('https://api.edamam.com/search?q=chicken&app_id=ec279fce&app_key=51017bcd32e69bcb0cc8b5f99e8783ca')
  .then(resp => resp.json())
  .then(resp => this.setState({searchResult: JSON.stringify(resp)})
  );
}

You can also log your response object like:

componentDidMount() {
  fetch('https://api.edamam.com/search?q=chicken&app_id=ec279fce&app_key=51017bcd32e69bcb0cc8b5f99e8783ca')
  .then(resp => resp.json())
  .then((resp) => {
    console.log(resp);
    this.setState({searchResult: JSON.stringify(resp)})
  });
}

The problem was: (I saw this error in the log)

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {q, from, to, params, more, count, hits}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of [MyComponent]...

So in fact, the resp in the 2nd callback is an object, which cannot be rendered, so you can either convert it to string to see if your API works, or loop through the object to render it properly based on your need!

Feel free to post here some new errors in your console, so we can find a good way to render your data, thanks

Collectives™ on Stack Overflow

Get answers from API request as array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related