reactjs running for loop with json data

Question

I have a hypothetical JSON file that reads like so:

{
  "main": [
    { 
      "dish": "steak",
      "side": [
         {"platter": "yogurt"},
         {"platter": "popcorn"}
      ]
    },
    { 
      "dish": "fish",
      "side": [
        {"platter": "salad"}
      ]
    }
  ]
}

I am currently having problems understanding how to run a for loop on this data with ReactJS. The rest of my code is organised as follows:

getInitialState:function(){
  return {
           fulldata: {
             main:[
               {
                 side:[]
               }
             ]
           }
         }
},

componentDidMount:function(){
  var self = this;
  $.getJSON('https://yooarel.fakewebsite', function(resultes){
    self.setState({fulldata: resultes});
  }); 
},

rundmc:function(){
  return (<ul>
      {
        this.state.fulldata.main.map(function(m, i){
           return m.side.map(function(make, o){
             return <li key={o}>{make.platter}</li>
           }) 
        })
      }
    </ul>)
},
render:function(){
  var self = this;
  return (<div>
    <ul>
      {this.state.fulldata.main.map(function(m, i){
        <li key={i}>
          <span>{m.dish}</span>
          {self.rundmc()}
        </li>
      })}
    </ul>
  </div>)
}

I am attempting to place a <ul li> block that lists out the different types of dishes I have. And then, for each dish under my li block, I am also attempting to place a ul li block that lists out the different platter under each dish. This is what I am trying to accomplish under my rundmc() function.

My code, as is, shows all platters under both of my ul ul li blocks. I am not sure how to output only the appropriate platter for each dish.

diedu · Accepted Answer · 2016-11-25 23:37:36Z

2

You are iterating all the data in rundmc function as well, you have to pass the current dish as a parameter and iterate only the side array

rundmc:function(dish){
  return (<ul>
      {
        dish.side.map(function(make, o){
          return <li key={o}>{make.platter}</li>
        })
      }
    </ul>)
},
render:function(){
  var self = this;
  return (<div>
    <ul>
      {this.state.fulldata.main.map(function(m, i){
        <li key={i}>
          <span>{m.dish}</span>
          {self.rundmc(m)}
        </li>
      })}
    </ul>
  </div>)
}

answered Nov 25, 2016 at 23:37

diedu

20.9k4 gold badges39 silver badges53 bronze badges

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

Comments

Fabian Schultz · Accepted Answer · 2016-11-25 23:39:11Z

I'd suggest to not use a method for this, as it's very simple to nest the maps, also doesn't require React to create new functions for each child every time it renders. Here's an example:

const json = {
	"main": [{
		"dish": "steak",
		"side": [{
			"platter": "yogurt"
		}, {
			"platter": "popcorn"
		}]
	}, {
		"dish": "fish",
		"side": [{
			"platter": "salad"
		}]
	}]
}

class Example extends React.Component {
  
  render() {
    return(
      <ul>{json.main.map((main, i) => (
        <li key={i}>
          {main.dish}
          <ul>{main.side.map(side => <li>{side.platter}</li>)}</ul>
        </li>))}
      </ul>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

Facundo Matteo · Accepted Answer · 2016-11-25 23:44:08Z

1

Maybe you are not returning the value in the map function?

{this.state.fulldata.main.map(function(m, i){
  return (
    <li key={i}>
      <span>{m.dish}</span>
      {self.rundmc()}
    </li>
  )
})}

Edit: Didn't saw the rundmc method. As diedu showed, you are mapping again the same array instead of passing the actual value you want to map inside.

edited Nov 25, 2016 at 23:44

answered Nov 25, 2016 at 23:30

Facundo Matteo

2,5272 gold badges17 silver badges19 bronze badges

Collectives™ on Stack Overflow

reactjs running for loop with json data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related