显示来自json的键和值对反应js

时间:2015-03-30 10:00:35

标签: javascript json reactjs

我正在尝试从json对象显示键和值。 这是我使用的代码

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')
);

我在这里收到像

这样的回复

authortext:Pete Hunt这是一条评论

authortext:Jordan Walke这是另一个评论

authortext:jone doe这是一条评论

提前致谢

1 个答案:

答案 0 :(得分:1)

我想你想要这样的东西:

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>
    );
  }
});