React jsを使用した多次元配列へのアクセス

Question

json apiで作業しています.APIにアクセスしてマップメソッドで最初の配列をリストすることはできますが、これを超えるものにはアクセスできません。

{ 
"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" 
     } ] 
    } ] 
}] 
} 

キーワードとランクの配列にアクセスするにはどうすればよいですか？ prods関数にネストするmapメソッドを使用してキーワードとランク情報を出力する方法はありますか？

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

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