Javascript：JSONオブジェクトを反復する

Question

私は反復処理を行うJSONオブジェクトを持っています。私は期待していた。このときしかし

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

、戻っ上記console.log：私は、私が思うに、これらの値のそれぞれをマッピングするためにObject.keyを使用してい

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

は、オブジェクトを操作するための正しい方法であります返すためにオブジェクト：

なぜそれが価値ではなく、オブジェクトを返しますか？

Answer 1

これは厳密にecmascript-2017答えを話しているが、それは簡単の古いバージョンにシムすることができますJavascript。

オブジェクト内のすべてのプロパティをループするには、Object.valuesまたはObject.entriesのいずれかを使用します。 Object.keysからキーが得られる場合、Object.valuesはプロパティ（well、duh）を返し、Object.entriesはオブジェクトの各エントリに対して[key, value]の配列を返します。あなたは両方を使用したい場合は、

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

、ここではObject.entriesオプションがあります：あなたはので、ここでObject.valuesオプションがあります、あなたの現在のコードの中にキーを使用していない

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

あなたは私たちがObject.entriesから得た配列から2つの値を得るために、ES6の構造化を使用していることが分かります。

シムは、各機能のMDNページにリンクされています。

Answer 2

オブジェクトキーを反復処理するためです。あなたのケースでオブジェクトを返すには、あなたはその値を取得するために与えられたキーを使用する必要があります。それはObject.keys(someObject)を見たとき、あなたが戻って得るものであるので、

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

オブジェクトのキーは、文字列です。そのキーに関連付けられた値が、探していたオブジェクトです。値を取得するには、マップの反復で、キーを使用してオブジェクトにアクセスする必要があります。

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

あなたはキーを反復しました。したがって、ループ内のtype変数はSamsung,iPhoneおよびGoogleに設定されます。次に、this.props.phone[type]を使用して値オブジェクトにアクセスします。コード内のphonesキーを修正してください。これは、JSONオブジェクトのphoneキーとは異なります。

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

矢印機能とparamsの構造解除を使用すると、コードを読みやすくすることができます。 Object.keysは配列として指定されたオブジェクトのキーを返すので、配列全体を反復処理し、現在のkeyを使用して値を抽出する必要があります。あなたはそうp key={phoneKey}..は、より多くの情報のチェックアウトのために、それに関連して、反応させ、内の要素を一覧表示するためのユニークなキーを割り当てる必要が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>) 
    ) 
}