Rendering json data with axios

Question

I'm trying to get data from .json file. Nothing appears on the page. Maybe somebody have an idea why? Thanks! This is link on the file https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json

import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
import axios from 'axios';


class Data extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      array: []
    };
  }

  componentDidMount(){
    axios
      .get('https://crossorigin.me/https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json')
      .then(({ data })=> {
        this.setState({ 
          array: data.recipes.Ingredients
        });
      })
      .catch((err)=> {})
  }

  render() {
    const child = this.state.array.map((element, index) => {
      return <div key={index}>
        <p>{ element.data.name }</p>
      </div>
    });

    return <div><div>{ child }</div></div>;
  }
}

export default Data;

the data property of the response allows you access to what you want. In your case, you've used data, so it'll appear as data.data.recipes.Ingredients. I'd suggest using ({ response }), so it's more accurate of a representation of what you're getting back. Turning it into response.data.recipes.Ingredients — Ohgodwhy
– Ohgodwhy, Commented May 14, 2017 at 1:59
recipes is array, so you can't access Ingredients like data.recipes.Ingredients. it should be data.recipes[index].Ingredients — Tharaka Wijebandara
– Tharaka Wijebandara, Commented May 14, 2017 at 2:01
Thanks guys. But screen still empty. Maybe you have some another idea? — Denis Aksiutsik
– Denis Aksiutsik, Commented May 14, 2017 at 2:12

Ravindra Ranwala · Accepted Answer · 2017-05-15 02:25:59Z

Here's my answer to the exercise given. I would like to share this, since you have tried that out. There may be different ways of doing this. Follow your own way. Here's how I did it.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';

class Data extends Component {
  constructor(props) {
   super(props);

   this.state = {
     array: []
   };

   this.renderRecipes = this.renderRecipes.bind(this);
 }

 componentDidMount(){
   axios
     .get('https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json')
     .then(({ data })=> {
       console.log(data);
       this.setState(
         { array: data.recipes }
       );
     })
     .catch((err)=> {})
 }

 render() {
   console.log(this.state.array);
   return(
     <div>
       <h3>Recipes</h3>
       <ul className="list-group">
          {this.renderRecipes()}
       </ul>
     </div>
   );
 }

 renderRecipes() {
   console.log(this.state.array);
   return _.map(this.state.array, recipe => {
     return (
       <li className="list-group-item" key={recipe.name}>
           {recipe.name}
           <ul className="list-group">
              Ingredients:
              {this.renderIngredients(recipe)}
           </ul>
       </li>
     );
   });
 }

 renderIngredients(recipe) {
    return _.map(recipe.Ingredients, ingredient => {
        return (
          <li className="list-group-item" key={ingredient.name}>
              <p>Name: {ingredient.name}, Amount: {ingredient.amount}</p>
          </li>
        );
    });
 }
}

export default Data;

You can go further. Just list down the recipie names using some Link component. Upon clicking you can take the user into a detailed page which consists of all the recipe information including ingredients. You may use React router and Link to get that thing done. Do some research on those topics and try that out.
I will try it! I learnt a lot from you! Thank you one more time!
Great ! Keep learning. If you are really enthusiast in learning React and Redux, I would like to recommend this course to you. It's very comprehensive beginner level course which covers most of the concepts and explains them nicely. udemy.com/react-redux/learn/v4

Ravindra Ranwala · Accepted Answer · 2017-05-14 03:43:17Z

Here I have fixed it. You have updated the code so I can't remember the initial one now. I think the issue is in your render method. With this code you can list down all the recipe names in your browser.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';

class Data extends Component {
  constructor(props) {
   super(props);

   this.state = {
     array: []
   };

   this.renderRecipes = this.renderRecipes.bind(this);
 }

 componentDidMount(){
   axios
     .get('https://crossorigin.me/https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json')
     .then(({ data })=> {
       console.log(data);
       this.setState(
         { array: data.recipes }
       );
     })
     .catch((err)=> {})
 }

 render() {
   console.log(this.state.array);
   return(
     <div>
       <h3>Recipes</h3>
       <ul className="list-group">
          {this.renderRecipes()}
       </ul>
     </div>
   );
 }

 renderRecipes() {
   console.log(this.state.array);
   return _.map(this.state.array, recipe => {
     return (
       <li className="list-group-item" key={recipe.name}>
           {recipe.name}
       </li>
     );
   });
 }
}

export default Data;

I would like to leave one exercise for you.

Exercise Change this code so that you can list down all the Ingredients for each recipe. Here I have listed all the recipe names. You just need to add Ingredients for each recipe and put them together. This will help you to improve your knowledge in React landscape.

Hope this helps. Happy coding !

Thank you very much! That's perfect! I hope I'll accomplish with your exercise!
Could you please mark it as the answer if it solves your problem above. That may be helpful someone reading this thread later. Make sure you do the same in future for the questions you posted in stack overflow as well. You can either up-vote, down-vote or mark it as the answer depending on how helpful it was to solve your initial problem. Anyway I am glad that you are working at the exercise. Keep me posted on the progress.
Sure! I added another array object - array: data.recipes[0].Ingredients and wrote this: renderRecipes() { return _.map(this.state.array, index => { return ( <li className="list-group-item" key={index.name}> <p>{index.name}</p> <p>{index.amount}</p> </li> ); }); } I think should be easier way to do it.

Collectives™ on Stack Overflow

Rendering json data with axios

2 Answers 2

4 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Linked

Related