webentwicklung-frage-antwort-db.com.de

Javascript: ISON über JSON-Objekte

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

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

Ich verwende Object.key, um jeden dieser Werte abzubilden. Ich denke, dies ist die richtige Art, 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>
            )
        })
    )
} 

Der console.log oben gibt dies jedoch zurück, wenn ich erwartet hatte, dass ein Objekt zurückgegeben wird:

 enter image description here

Warum gibt es einen Wert und kein Objekt zurück?

12
patrickhuang94

Dies ist streng genommen eine ecmascript-2017 Antwort, kann aber leicht in ältere Versionen von Javascript übernommen werden.

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

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

    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 möchten:

    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 werden sehen, dass wir ES6-Destructuring verwenden, um die beiden Werte aus dem Array zu holen, das wir aus Object.entries erhalten.

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

15
lonesomeday

Weil Sie über Objektschlüssel iterieren. Um ein Objekt in Ihrem Fall zurückzugeben, müssen Sie den angegebenen Schlüssel verwenden, um seinen Wert zu ermitteln:

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

Die Schlüssel eines Objekts sind Zeichenfolgen. Dies ist, was Sie erhalten, wenn Sie Object.keys(someObject) betrachten. Der mit diesem Schlüssel verknüpfte Wert ist das Objekt, nach dem Sie gesucht haben. Um den Wert zu erhalten, müssen Sie in Ihrer Map-Iteration 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>
        )
    })
)
3
Travis J

Sie haben die Tasten durchlaufen. Die Variable type in Ihrer Schleife wird also 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>
            )
        })
    )
} 
0
uautkarsh

Sie können die Pfeilfunktion und die Zerstörung von Parametern verwenden, um das Lesen des Codes zu erleichtern. Da Object.keys die Schlüssel des angegebenen Objekts als Array zurückgibt, müssen Sie das Array durchlaufen und den Wert mit der aktuellen key extrahieren. Sie müssen den Listenelementen in React einen eindeutigen Schlüssel zuweisen. Daher ist p key={phoneKey}.. damit verbunden. Weitere Informationen dazu finden Sie unter checkout 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