javascript - 在json中显示json中的键和值对

我正在尝试显示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')
);

在这里我得到像

作者文字：皮特·亨特（Pete Hunt）这是一条评论

作者文字：乔丹·沃克这是另一条评论

authortext：jone doe这是一条评论

提前致谢

最佳答案

我想您想要这样的东西：

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