Question

在这里，我已经为我的网页添加了html代码。每个类别都有不同类型的数据项和结构。它将迭代json对象的数据。如何从json api获取数据以及如何使用react js实现这个？我很难找到解决方案。

<div class="main">

      <div class="type-one">
        <div class="type-list">
          <div class="front">
            <img src="img/sample.png" alt="" width="143" />
            <h2>Lorem iplsum</h2>
            <div className="total-items">2 items</div>
          </div>
          <div class="back">
            <div class="list">Item1</div>
            <div class="list">Item2</div>
            <div class="list">Item3</div>
          </div>
        </div>
        <div class="type-list">
          <div class="front">
            <img src="img/sample.png" alt="" width="143" />
            <h2>Lorem iplsum</h2>
            <div className="total-items">2 items</div>
          </div>
          <div class="back">
            <div class="list">Item1</div>
            <div class="list">Item2</div>
            <div class="list">Item3</div>
          </div>
        </div>
      </div>

      <div class="message">
        <p>Lorem ipsum doler sit amet.</p>
      </div>

      <div class="type-two">
        <div class="type-list">
          <div class="front">
            <img src="img/sample.png" alt="" width="143" />
            <h2>Lorem iplsum</h2>
            <div className="total-items">2 items</div>
          </div>
          <div class="back">
            <div class="list">Item1</div>
            <div class="list">Item2</div>
            <div class="list">Item3</div>
          </div>
        </div>
      </div>

    </div>

这是我迄今为止尝试过的代码。

var Category = React.createClass({
    render: function(){
        var list = this.props.data.map(function(el, i) {
            return  <div className="type-list" key={i}>
                      <div className="front">
                        <img src={el.category_img} alt="" />
                        <h2>{el.category_name}</h2>
                        <div className="total-items">{el.total_items} items</div>
                      </div>
                </div>;
        });

        return <div className="type-one">{ list }</div>;
    }
});

var data = [
    {
        category_name:"Lorem iplsum",
        total_items:2,
        category_img:"img/sample.png",
        sub:[
            {
                item_name:"item1"
            },
            {
                item_name:"item2"
            },
            {
                item_name:"item3"
            }
        ]
    },
    {
        category_name:"Lorem iplsum2",
        total_items:3,
        category_img:"img/sample.png",
        sub:[
            {
                item_name:"item21"
            },
            {
                item_name:"item22"
            },
            {
                item_name:"item23"
            }
        ]
    }
];

var Cover = React.createClass({
  render: function() {
    return (
        <div>
            <Category data={data}/>
        </div>
    );
  }
});

Answer 1

我建议使用jQuery＆＃39; ajax因此：https://api.jquery.com/jQuery.ajax/

使用它像：

$.ajax({
  url: "path/to/api"
}).done(function(data) {
  this.setState({data: data})
});

在您的组件componentWillMount()中实施此模式，您就可以了！

如何使用react js迭代json数据？

1 个答案: