使用React訪問多維數組js

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調用內map方法和分配結果的變量，包括我在高層次的返回對象

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

<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>

Answer 2

「是否有使用地圖的方法來窩在電棒功能和輸出的關鍵字和排名信息的方法嗎？」

回答：是的。

你知道有一個屬性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 
    }); 
});