Question

我正在使用json api并且我能够访问api并使用map方法列出第一个数组，但无法访问除此之外的任何内容。

{
"client_id": 1,
"client_name": "Moen, Hickle and Stehr",
"products": [ {
    "product_id": 1,
    "product_name": "Ergonomic Cotton Keyboard",
    "product_asin": "cfq35yoyh64i",
    "product_image_url": "https://unsplash.it/310/676",
    "keywords": [ {
        "keyword_id": 1,
        "keyword_name": "nam",
        "keyword_country": "LV",
        "ranks": [ {
            "rank_id": 1,
            "rank_position": 214,
            "rank_page": 2,
            "rank_date": "2016-08-16"
        }, {
            "rank_id": 2,
            "rank_position": 82,
            "rank_page": 3,
            "rank_date": "2016-11-12"
        } ]
    } ]
 }]
}

如何访问关键字和排名数组？有没有办法使用map方法嵌套在prods函数中并输出关键字和排名信息？

var Product = React.createClass({

render: function() {

var prods = this.props.products.map(function(item, index){
  return(
      <ul key={index}>
        <li>{item.product_name}   </li>
        <li>{item.product_image_url}</li>
      </ul>      
    )
});

return (
  <div className="col-sm-12 compBlock">
    <div className="col-sm-6">
      <h3>{this.props.name}</h3>
        {prods}
    </div>
  </div>
)
}

Answer 1

“有没有办法使用map方法在prods函数中嵌套并输出关键字和排名信息？”

答案：是的。

您知道有一个属性keywords，它是一个与this.props.products非常相似的对象数组。

要进行访问，您可以像现有.map()调用中的其他属性一样使用点表示法。

要访问数组keywords上的对象的属性，您可以在其上调用.map()并使用符号访问您想要的属性：

var prods = this.props.products.map(function(item, index){
  // You already are referencing these:
  item.product_name
  item.product_image_url


  // To access keywords:
  item.keywords ( the keywords array )

  // Nested map on keywords can be called here also:
  item.keywords.map(function(current,index){
    // You can now access .ranks:
    current.ranks
  });
});

Answer 2

我认为像这个代码片段应该有效。

我在高级map调用中使用map方法，并将结果分配给我在高级别返回对象中包含的变量

＆＃13;

const props = {
"client_id": 1,
"client_name": "Moen, Hickle and Stehr",
"products": [ {
    "product_id": 1,
    "product_name": "Ergonomic Cotton Keyboard",
    "product_asin": "cfq35yoyh64i",
    "product_image_url": "https://unsplash.it/310/676",
    "keywords": [ {
        "keyword_id": 1,
        "keyword_name": "nam",
        "keyword_country": "LV",
        "ranks": [ {
            "rank_id": 1,
            "rank_position": 214,
            "rank_page": 2,
            "rank_date": "2016-08-16"
        }, {
            "rank_id": 2,
            "rank_position": 82,
            "rank_page": 3,
            "rank_date": "2016-11-12"
        } ]
    } ]
 }]
};

const prods = props.products.map((item, index) => {
  const keywords = item.keywords.map(cur => {
    return (
      <span>
        <li>{cur.keyword_name}</li>
        <li>{cur.keyword_country}</li>    
      </span>
    );
  });
  return(
      <ul key={index}>
        <li>{item.product_name}</li>
        <li>{item.product_image_url}</li>
        {keywords}
      </ul>                                       
    );
});

console.log(prods);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

使用React js访问多维数组

2 个答案: