Javascript: Iterieren über JSON-Objekte

Question

Ich habe ein JSON-Objekt, das ich durchlaufen möchte.

"phone": { 
    "Samsung": { 
     "type": "S7" 
    }, 
    "iPhone": { 
     "type": "6S" 
    }, 
    "Google": { 
     "type": "Pixel" 
    } 
} 

ich Object.key bin mit durch jeden dieser Werte abzubilden, was ich denke, ist der richtige Weg, um mit Objekten zu arbeiten:

render() { 
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google" 
    return (
     Object.keys(this.props.phones).map((type) => { 
      console.log(type) 
      return (
       <p>Type of phone: {type}</p> 
      ) 
     }) 
    ) 
} 

jedoch die console.log oben zurückkehrt, als ich erwartet hatte ein Objekt zurückgeben:

Warum ist es ein Wert zurückgegeben wird, und nicht ein Objekt?

Answer 1

Diese streng eine ecmascript-2017 Antwort spricht, aber es kann leicht in älteren Versionen von füttert werden Javascript.

Sie möchten entweder Object.values oder Object.entries verwenden, um alle Eigenschaften in einem Objekt durchzulaufen. Wo Object.keys gibt Ihnen die Schlüssel, Object.values gibt Ihnen die Eigenschaften (gut, duh) und Object.entries gibt Ihnen ein Array [key, value] für jeden Eintrag im Objekt.

Sie den Schlüssel nicht in Ihrem aktuellen Code verwenden, also hier ist die Object.values Option:

Object.values(this.props.phones).map((type) => { 
     console.log(type) 
     return (
      <p>Type of phone: {type}</p> 
     ) 
    }) 

und hier ist die Object.entries Option, wenn Sie beide verwenden wollte:

Object.entries(this.props.phones).map(([make, type]) => { 
     console.log(make) 
     console.log(type) 
     return (
      <p>Make of phone: {make}</p> 
      <p>Type of phone: {type}</p> 
     ) 
    }) 

Sie Ich werde sehen, dass wir ES6-Destrukturierung verwenden, um die beiden Werte aus dem Array zu erhalten, das wir von Object.entries erhalten.

Die Shims sind auf den MDN-Seiten für jede Funktion verknüpft.

Answer 2

Weil Sie über Objektschlüssel iterieren. Zur Rückkehr Objekt in Ihrem Fall müssen Sie bestimmte Schlüssel verwenden, um seinen Wert zu erhalten:

render() { 
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google" 
    return (
     Object.keys(this.props.phones).map((type) => { 
      console.log(this.props.phones[type]) 
      ... 
     }) 
    ) 

} 

Answer 3

Die Schlüssel eines Objekts sind Strings, so dass ist, was Sie zurückbekommen, wenn sie bei Object.keys(someObject) suchen. Der mit diesem Schlüssel verknüpfte Wert ist das Objekt, nach dem Sie gesucht haben. Um den Wert zu erhalten, müssten Sie in Ihrer Karteniteration mit Ihrem Schlüssel auf das Objekt zugreifen.

var self = this;//close over this value for use in map 
return (
    Object.keys(this.props.phones).map((type) => { 
     console.log(self.props.phones[type]);//this will yield the object 
     return (
      <p>Type of phone: {self.props.phones[type]}</p> 
     ) 
    }) 
) 

Answer 4

Sie haben über die Schlüssel iteriert. Die Variable type in Ihrer Schleife wird auf Samsung, iPhone und Google gesetzt. Dann verwenden Sie this.props.phone[type], um auf die Wertobjekte zuzugreifen. Bitte korrigieren Sie den Schlüssel phones in Ihrem Code, der sich vom Schlüssel phone im JSON-Objekt unterscheidet.

render() { 
    //this.props.phone contains the objects "Samsung", "iPhone", and "Google" 
    return (
     Object.keys(this.props.phone).map((type) => { 
      console.log(this.props.phone[type]) 
      return (
       <p>Type of phone: {this.props.phone[type]}</p> 
      ) 
     }) 
    ) 
} 

Answer 5

Sie können die Pfeilfunktion und die Destrukturierung von Parametern verwenden, um das Lesen Ihres Codes zu erleichtern. Da Object.keys die Schlüssel des angegebenen Objekts als Array zurückgeben, müssen Sie über das Array iterieren und den Wert mit dem aktuellen key extrahieren. Sie müssen einen eindeutigen Schlüssel zuweisen Elemente zur Liste in Reaktion, so p key={phoneKey}.. ist, dass im Zusammenhang, für weitere Informationen Kasse Lists and Keys

const {phones} = this.props; 
const phoneKeys = Object.keys(phones); 

render() { 
    return (
     phoneKeys.map(phoneKey) => <p key={phoneKey}>Type of phone: {phones[phoneKey].type}</p>) 
    ) 
}