Display key and value pair from json In react js

Question

I am trying to display key and value from a json object. here is the code i m using

var FirebaseItem = React.createClass({
  render: function() {
    var v=[];var k=[];
    var foo;
      for(var key in this.props.data){
        v.push(this.props.data[key]);
        k.push(key);

      }
       foo= function(){
          return <p>{k} : {v}</p>;
        }();
    return (
           <div className="Data-item">{foo}</div>
    );
  }
});

var FirebaseList = React.createClass({
  render: function() {
    var FirebaseData = this.props.data.map(function (obj) {
      return (
           <FirebaseItem data = {obj}/>
      );
    });
    return (
           <div className="Datalist">
        {FirebaseData}
      </div>  
    );
  }
});


var Firebase = React.createClass({
  render: function() {
    var FirebaseData=this.props.data;

    return (
<FirebaseList data={FirebaseData}/>

    );
  }
})
var JsonData = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"},
  {author: "jone doe", text: "This is one comment"}
];
React.render(

  <Firebase data={JsonData} />,
  document.getElementById('Datawrap')
);

Here i am getting response like

authortext : Pete HuntThis is one comment

authortext : Jordan WalkeThis is another comment

authortext : jone doeThis is one comment

Thanks in advance

Safari · Accepted Answer · 2015-03-30 10:05:52Z

1

I think you want something like that:

var FirebaseItem = React.createClass({
  render: function() {
    var pairs = [];
      for(var key in this.props.data){
        pairs.push(<p>{key} : {this.props.data[key]}</p>);
      }
    return (
           <div className="Data-item">{pairs}</div>
    );
  }
});

answered Mar 30, 2015 at 10:05

Safari

3,3929 gold badges50 silver badges66 bronze badges

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

1 Comment

codeeee Over a year ago

Thanks just staring with react,in addition to it want to ask in case of complex json how to achieve this .

Collectives™ on Stack Overflow

Display key and value pair from json In react js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related