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

@TheReason dataW ??

Vikram Anand Bhushan
– Vikram Anand Bhushan

2016-05-17 13:05:21 +00:00
Commented May 17, 2016 at 13:05 — Vikram Anand Bhushan
– Vikram Anand Bhushan, Commented May 17, 2016 at 13:05
Javascript object Vs JSON

The Reason
– The Reason

2016-05-17 13:11:33 +00:00
Commented May 17, 2016 at 13:11 — The Reason
– The Reason, Commented May 17, 2016 at 13:11

Antonis Zisis · Accepted Answer · 2016-05-17 13:09:12Z

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, 2016 at 13:09

Antonis Zisis

2,0243 gold badges18 silver badges17 bronze badges

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

3 Comments

Vikram Anand Bhushan Over a year ago

jsfiddle.net/69z2wepo/42338 I changed but it doesnt show the value of the key instead its showing just the name

Antonis Zisis Over a year ago

The problem is your data. What exactly are you trying to display?

Vikram Anand Bhushan Over a year ago

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

The Reason · Accepted Answer · 2016-05-17 13:18:31Z

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, 2016 at 13:18

answered May 17, 2016 at 13:07

The Reason

8,0135 gold badges27 silver badges43 bronze badges

3 Comments

Vikram Anand Bhushan Over a year ago

jsfiddle.net/69z2wepo/42338 I changed but it doesnt show the value of the key instead its showing just the name

Vikram Anand Bhushan Over a year ago

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 Over a year ago

yes it shows error that SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Collectives™ on Stack Overflow

How to display Json Data in ReactJs

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related