CODEWITHSUNDEEP
javascriptjsonreactjs
Vikram Anand Bhushan
Vikram Anand Bhushan

Reputation: 4886

How to display Json Data in ReactJs

I have this code where I am just trying to display a Json Data but it returns undefined 

var dataW = [
        {
       empAverage:3,
       reviewerAverage:4,
       stdAverageOfTask:1
    }
]

var ReviewCalculator = React.createClass({

                            getInitialState: function() {
                                      return {data: dataW};

                              },

                          render: function() {
                              return (
                                        <table>
                                                <tr><th>empAverage</th><td>{ this.props.data.empAverage}</td></tr>
                                        </table>
                                  );

                              }
                      });
 ReactDOM.render(<ReviewCalculator    />, document.getElementById('container'));

The Fiddle is here LINK

Upvotes: 1

Views: 10288

Answers (2)

The Reason
The Reason

Reputation: 7973

Of course, because you dont have this.props.data.empAverage instead of that you are having this.state.data.empAverage & your data it's an array. For this example i've changed to [0] but for the future a suggest using Array.prototype.map method

Worked example

var dataW = [
        {
       empAverage:3,
       reviewerAverage:4,
       stdAverageOfTask:1
    }
]

var ReviewCalculator = React.createClass({
   getInitialState: function() {
     return {data: dataW};
   },
   render: function() {
     return (
        <table>
           <tr>
             <td>{this.state.data[0].reviewerAverage}</td>
           </tr>
        </table>
     );

   }
});
 ReactDOM.render(<ReviewCalculator/>, document.getElementById('container'));

You can event remove JSON.stringify if you want. fiddle

Thanks

Upvotes: 0

Antonis Zisis
Antonis Zisis

Reputation: 2049

data is your component's 'state' set here:

getInitialState: function() {
 return {data: dataW};
}

Therefore change this.props.data.empAverage to this.state.data.empAverage.

Upvotes: 2

Related Questions