2017-10-31 14 views
1

Wie könnte ich ein mehrdimensionales Array mit verschiedenen Schlüsseln abbilden? Dies ist ein Beispiel Array ähnlich: (meine ursprüngliche Array von Ajax und PHP-MySQL-Abfrage erhalten wird, das ist, warum ich dies tun müssen):Reagieren: Multidimensionales Array mit verschiedenen Schlüsseln zuordnen

var products = [ 
     { 
      id: 1, 
      name: 'John', 
      phones: { 
       sony: 
       { 
        brand: 'sony', 
        model: 'z3' 
       }, 
       samsung: 
       { 
        brand: 'samsung', 
        model: 's7' 
       } 
       } 

     }, 
     { 
      id: 2, 
      name: 'Mike', 
      phones: { 
       sony: 
       { 
        brand: 'sony', 
        model: 'z1' 
       }, 
       nokia: 
       { 
        brand: 'nokia', 
        model: 'n8' 
       } 
       } 

     } 
     ]; 

Wenn ich versuche, dieses Array zu kartieren ich: ‚Uncaught Typeerror: product.phones.map ist keine Funktion ':

const List = ({ products, addToCart }) => { 

    return (
    <div className="odds-3"> 
     <div className="odds"> 

     {products.map((product, index) => 
      <div key={index}> 
      <p>{product.id} - {product.name}</p> 
      <ul> 
       {product.phones.map((phone, index) => 

       <li key={index}>{phone.brand} - {phone.model}</li> 

      )} 
      </ul> 
      </div> 
     )} 
     </div> 
    </div> 
); 

} 

Mit diesem Array (ohne Telefon-Tasten), funktioniert gut:

var products = [ 
      { 
       id: 1, 
       name: 'John', 
       phones: 
        [{ 
         brand: 'sony', 
         model: 'z3' 
        }, 
        { 
         brand: 'samsung', 
         model: 's7' 
        } 
        ] 
      }, 
      { 
       id: 2, 
       name: 'Mike', 
       phones: 
        [{ 
         brand: 'sony', 
         model: 'z1' 
        }, 
        { 
         brand: 'nokia', 
         model: 'n8' 
        } 
        ] 
      } 
      ]; 

Antwort

2

products ist kein Array, daher funktioniert die map Funktion nicht. Versuchen Sie

{Object.keys(product.phones).map((phone, index) => 
<li key={index}>{product.phones[phone].brand} - {product.phones[phone].model}</li> 
)} 

stattdessen.

0

In Ihrem ersten Beispiel die Telefone Eigenschaft ist ein object kein array und daher nicht über die map Funktion

Die zweite phones ist ein array arbeitet.

+0

und wie könnte ich durch das Array gehen? – kurtko

+0

Nun, wenn 'Telefone' ein Array sein können, dann bleiben Sie bei und Sie sind gut zu gehen. Ansonsten können Sie die Schlüssel im Objekt mit der Antwort von @ kind-user –

0

Wie andere vor mir gesagt haben, products ist kein Array und daher können Sie die Kartenfunktion nicht verwenden.

Obwohl, können Sie die map Funktion von lodash Bibliothek benutzen, die Sie verwenden können, um ein Objekt Schlüssel/Werte iterieren:

import map from 'lodash' 
{map(product, (value, key) => 
... 
)} 

Für mehr Informationen, lesen here

+0

sehr interessant durchlaufen! – kurtko

0

Arrays arbeiten leicht anders in JavaScript. In Ihrem Fall ein Drop-in-Fix würde über die Werte des Objekts, so etwas wie dieses Iterieren sein:

{products.map((product, index) => 
    <div key={index}> 
     <p>{product.id} - {product.name}</p> 
     <ul> 
      {Object.values(product.phones).map((phone, index) => 
      <li key={index}>{phone.brand} - {phone.model}</li> 
      )} 
     </ul> 
    </div> 
)} 

Während einige Browser noch Unterstützung fehlt für Object.values(), sollte der transpilation Schritt darum kümmern.

Beachten Sie, dass es in der Regel nicht ratsam ist, Indizes als Schlüssel zu verwenden, wie Sie möglicherweise weird rendering bugs erhalten, sollte sich die Reihenfolge oder der Inhalt Ihrer Iterables ändern.