Zugriff auf multidimensionale Array mit React js

Question

Ich arbeite mit einem JSON API und ich bin in der Lage, auf die API zugreifen und listet das erste Array mit der Kartenmethode, aber kann nichts darüber hinaus zugreifen.

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

Wie greife ich auf die Schlüsselwörter und Rankarrays zu? Gibt es eine Möglichkeit, die map-Methode zu verwenden, um in der prods-Funktion zu verschachteln und die Schlüsselwort- und Ranking-Informationen auszugeben?

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

Ich denke, so etwas wie dieses Snippet funktionieren sollte.

Ich bin mit dem map Methode innerhalb der High-Level-map Aufruf und die Ergebnisse einer Variablen zugewiesen, die ich in der High-Level-Rückkehr Objekt gehören

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

„Gibt es eine Möglichkeit, die Karte Methode Nest in der prods Funktion und gibt das Schlüsselwort und Ranking Info zu benutzen?“

Antwort: Ja.

Sie wissen, dass es eine Eigenschaft keywords gibt, die ein Array von Objekten ähnlich wie this.props.products ist.

Um darauf zuzugreifen, können Sie Punktnotation verwenden, wie Sie mit anderen Eigenschaften in Ihrem vorhandenen .map() Aufruf haben.

Um Zugang, eine Eigenschaft eines Objekts auf dem Array keywords, können Sie .map() auf sie anrufen und Zugriff auf die Eigenschaft, die Sie wieder mit für Notation wollen:

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