Javascript: Itération sur des objets JSON

J'ai un objet JSON que je veux passer.


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


j'utilise
Object.key

Pour afficher chacune de ces valeurs, ce qui, à mon avis, est la bonne façon de travailler avec des objets:


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


mais
console.log

Ci-dessus renvoie cela quand je m'attendais à un objet sera de retour:

https://i.stack.imgur.com/INfOv.png
Pourquoi renvoie-t-il une valeur, pas un objet?
Invité:

Agathe

Confirmation de:

Strictement parlant, c'est la réponse.
https://coderoad.ru/?tag=ecmascript-2017
, Mais cela peut être facilement inséré dans les versions plus anciennes. Javascript.

Vous voulez utiliser soit
https://developer.mozilla.org/ ... alues
, ou
https://developer.mozilla.org/ ... tries
Pour la minorité cyclique de toutes les propriétés de l'objet. Où
Object.keys

te donne des clés
Object.values

te donne des propriétés /Hé bien oui/, et
Object.entries

vous donne un tableau
[key, value]

Pour chaque entrée de l'objet.

Vous n'utilisez pas la clé de votre code actuel, donc l'option
Object.values

:


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


Mais l'option
Object.entries

, Si vous souhaitez utiliser les deux options:


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


Vous verrez que nous utilisons la détestation ES6, Pour obtenir deux valeurs d'un tableau dérivé de
Object.entries

.

Les joints sont connectés sur les pages MDN Pour chaque fonction.

Alice

Confirmation de:

Parce que vous traversez les clés des objets. Pour renvoyer l'objet dans votre cas, vous devez utiliser cette clé pour obtenir sa valeur:


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]/
...
}/
/

}

Catherine

Confirmation de:

Les clés d'objet sont des chaînes, c'est ce que vous revenez, en regardant
Object.keys/someObject/

. La valeur associée à cette clé est l'objet que vous recherchiez. Pour obtenir cette valeur, dans votre carte d'itération, vous devez accéder à l'objet à l'aide de la touche.


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

Emilie

Confirmation de:

Vous pouvez utiliser la fonction de la flèche et destructuration des paramètres pour faciliter la lecture de votre code. Dans la mesure où
Object.keys

Renvoie les clés de cet objet en tant que tableau, vous devez trier un tableau et extraire la valeur en utilisant le courant.
key

. Vous devez attribuer une clé unique à l'élément de la liste dans React, de sorte que
p key={phoneKey}..

associé à cela, pour plus d'informations, chèque
https://facebook.github.io/rea ... .html

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

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

Blanche

Confirmation de:

Vous avez traversé toutes les clés. Ainsi , variable
type

Dans votre cycle sera installé dans
Samsung

,
iPhone

et
Google

. Alors vous utilisez
this.props.phone[type]

Pour accéder aux objets value. S'il vous plaît corriger la clé
phones

Dans votre code qui diffère de la clé
phone

Dans l'objet JSON.


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

Pour répondre aux questions, connectez-vous ou registre