web-dev-qa-db-fra.com

Javascript: Itération sur les objets JSON

J'ai un objet JSON que je veux parcourir.

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

J'utilise Object.key pour mapper à travers chacune de ces valeurs, que je pense être 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>
            )
        })
    )
}

Cependant, le console.log ci-dessus renvoie ceci lorsque je m'attendais à ce qu'un objet retourne:

 enter image description here

Pourquoi renvoie-t-il une valeur et non un objet?

javascriptreactjsecmascript-6
12
patrickhuang94

C’est à proprement parler une réponse ecmascript-2017 , mais il peut facilement être transféré dans des versions plus anciennes de Javascript.

Vous souhaitez utiliser Object.values ou Object.entries pour parcourir toutes les propriétés d'un objet. Où Object.keys vous donne les clés, Object.values vous donne les propriétés (bien, duh) et Object.entries vous donne un tableau [key, value] pour chaque entrée de l'objet.

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

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

et voici l'option Object.entries, si vous voulez utiliser les deux:

    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éstructuration ES6 pour extraire les deux valeurs du tableau que nous obtenons de Object.entries.

Les cales sont liées sur les pages MDN pour chaque fonction.

15
lonesomeday

Parce que vous parcourez les clés d'objet. Pour retourner un objet dans votre cas, vous devez utiliser la clé donnée 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])
            ...
        })
    )

}
4
Bartek Fryzowicz

Les clés d'un objet sont des chaînes, c'est ce que vous obtiendrez en regardant Object.keys(someObject). La valeur associée à cette clé est l'objet que vous cherchiez. Pour obtenir la valeur, dans votre itération de carte, vous devez accéder à l'objet avec votre clé.

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>
        )
    })
)
3
Travis J

Vous avez parcouru les clés. Ainsi, la variable type de votre boucle sera définie sur Samsung, iPhone et Google. Ensuite, vous utilisez this.props.phone[type] pour accéder aux objets de valeur. Veuillez corriger la clé phones dans votre code qui est différente de la clé phone de 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>
            )
        })
    )
}
0
uautkarsh

Vous pouvez utiliser la fonction flèche et la déstructuration des paramètres pour faciliter la lecture de votre code. Puisque Object.keys renvoie les clés de l'objet donné sous forme de tableau, vous devez effectuer une itération sur le tableau et extraire la valeur à l'aide du nom key actuel. Vous devez attribuer une clé unique à la liste des éléments dans React. Ainsi, p key={phoneKey}.. est associé à celui-ci. Pour plus d'informations, consultez 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>)
    )
}
0
cubbuk