JavaScript: Iterowanie obiektów JSON

Question

Mam obiekt JSON, który chcę iterować.

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

Używam Object.key mapować przez każdy z tych wartości, które myślę, że to jest poprawny sposób do pracy z obiektami:

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

Jednak console.log powyżej zwrotów to kiedy spodziewa celem powrotu:

Dlaczego powrocie wartość, a nie obiekt?

Answer 1

ta jest ściśle mówiąc ecmascript-2017 odpowiedź, ale może być łatwo podkładano pod starszymi wersjami JavaScript.

Użytkownik chce użyć albo Object.values lub Object.entries, aby zapętlić wszystkie właściwości obiektu. Gdzie Object.keys daje klucze, Object.values daje właściwości (dobrze, duh) i Object.entries daje tablicy [key, value] dla każdego wpisu w obiekcie.

Nie używać klawisza w aktualnym kodzie, więc tutaj jest opcja Object.values:

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

i tu jest opcja Object.entries, jeśli chcesz używać zarówno:

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

You zobaczymy, że używamy destrukturyzacji ES6, aby uzyskać dwie wartości z tablicy, którą otrzymujemy z Object.entries.

Podkładki są połączone na stronach MDN dla każdej funkcji.

Answer 2

Ponieważ wykonuje się iteracje po kluczach obiektów. Aby powrócić obiektu w twoim przypadku trzeba użyć danego klawisza, aby uzyskać jego wartość:

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

Klucze obiektu są struny, więc to, co dostaniesz z powrotem, gdy patrząc na Object.keys(someObject). Wartość powiązana z tym kluczem to obiekt, którego szukasz. Aby uzyskać wartość, w swojej iteracji mapy musisz uzyskać dostęp do obiektu za pomocą swojego klucza.

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

Wykonałeś iterację kluczy. Zmienna type w pętli zostanie ustawiona na Samsung, iPhone i Google. Następnie należy użyć this.props.phone[type], aby uzyskać dostęp do obiektów wartości. Napraw klucz phones w kodzie, który różni się od klucza phone w obiekcie 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> 
      ) 
     }) 
    ) 
} 

Answer 5

Można użyć funkcji strzałki i destrukturyzacji parametrów, aby ułatwić odczytanie kodu. Od Object.keys zwróć klucze danego obiektu jako tablicę, musisz iterować po tablicy i wyodrębnić wartość przy użyciu bieżącego key. Trzeba przypisać unikalny klucz do listy elementów zareagować, więc p key={phoneKey}.. jest związane z tym, aby uzyskać więcej informacji kasie 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>) 
    ) 
}