javascript - How to display Json Data in ReactJs - Stack Overflow

admin管理员组

文章数量:1431949

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

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

• javascript
• json
• reactjs

Share Improve this question Follow asked May 17, 2016 at 12:58 Vikram Anand BhushanVikram Anand Bhushan 4,8961515 gold badges7474 silver badges133133 bronze badges 2

• @TheReason dataW ?? – Vikram Anand Bhushan Commented May 17, 2016 at 13:05
• 1 Javascript object Vs JSON – The Reason Commented May 17, 2016 at 13:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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

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

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

本文标签： javascriptHow to display Json Data in ReactJsStack Overflow