How to display Json Data in ReactJs

Question

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 object Vs JSON](http://stackoverflow.com/questions/8294088/javascript-object-vs-json) — The Reason, May 17 '16 at 13:11

score 2 · Answer 1 · answered May 17 '16 at 13:09

2

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

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

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

answered May 17 '16 at 13:09

Antonis Zisis

1,943
3
16
17

https://jsfiddle.net/69z2wepo/42338/ I changed but it doesnt show the value of the key instead its showing just the name – Vikram Anand Bhushan May 17 '16 at 13:13
The problem is your data. What exactly are you trying to display? – Antonis Zisis May 17 '16 at 13:19
well in my Localhost I have an API which I call to update the data , the Json looks like this `[{"empAverage":3,"reviewerAverage":0,"stdAverageOfTask":5}]` and I am trying to show in a table format thats all – Vikram Anand Bhushan May 17 '16 at 13:26

The Reason · Accepted Answer · 2016-05-17T13:18:31.923

0

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

edited May 17 '16 at 13:18

answered May 17 '16 at 13:07

The Reason

7,705
4
24
42

https://jsfiddle.net/69z2wepo/42338/ I changed but it doesnt show the value of the key instead its showing just the name – Vikram Anand Bhushan May 17 '16 at 13:13
in server I am getting error , I am loading the Json from an API and it looks like this `[{"empAverage":3,"reviewerAverage":0,"stdAverageOfTask":5}]` – Vikram Anand Bhushan May 17 '16 at 13:45
yes it shows error that `SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data` – Vikram Anand Bhushan May 17 '16 at 13:53

How to display Json Data in ReactJs

2 Answers2