Typ Fehler beim Zugriff auf und Rückgabe von Objekten Arrays innerhalb von Objekten

Question

Ich versuche, die Daten in jedem Array in einem Objekt zurückzugeben.

Das ist meine Json:

"student_clubs": { // brought in as object 
     "art": { // object 
     "illustration": ["Done"], // Array 
     "design": ["Done"] // Array 
     }, 
     "sports": { // object 
     "Basketball": ["Incomplete"], // Array 
     "Hockey": ["Done"] // Array 
     } 
    }, 

Ich versuche es so anzuzeigen:

art: 
illustration: done  design: done 

sports: 
Basketball: Incomplete Hockey: Done 

mein jsx:

import React, { PropTypes } from 'react'; 


const ClubsPropTypes = { 
    student_clubs: PropTypes.object.isRequired, 
    student_grades: PropTypes.object.isRequired, 
}; 

class Clubs extends React.Component { 


    render() { 
    const StudentClubs = this.props.student_clubs; 
    const Grades = this.props.grades; 


    return (
     <div className=""> 
      {(StudentClubs.art || []).map(art => (
        <div className="row"> 
         <ul> 
          <p>art</p> 
          <li>illustration: {art.illustration}</li> 
          <li>design: {art.design}</li> 
         </ul> 
        </div> 
       ))} 
      ... same code for sports (seems repetitive) 
     </div> 
    ); 
    } 
} 

Clubs.propTypes = ClubsPropTypes; 

module.exports = Clubs; 

Im Moment bin ich immer Uncaught TypeError: (StudentClubs.art || []).map is not a function . Warum das? Wie kann ich das beheben? Gibt es auch eine bessere Möglichkeit, diese Objekte zu durchlaufen? : \

Answer 1

StudentClubs.art ist ein Objekt, so dass Sie es nicht mit Karte verwenden können.

Sie können Schleife über ein Objekt Object.keys() verwendet, die ein Array der Objektschlüssel zurückgibt, siehe: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Sie können Schleife über einen Objektschlüssel wie:

Object.keys(myobject).map((key) => { 
    // do stuff with myobject[key] 
}) 

Oder Verwendung für in, siehe : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

zB:

for (let key in myobject) { 
    if (myobject.hasOwnProperty(key)) { 
    // do stuff with myobject[key] 
    } 
} 

So können Sie die verschiedenen Schläger überschleifen und für jeden dieser Schläger die Tasten durchlaufen - den Namen des Schlüssels und die Liste der Werte anzeigen (z. "erledigt").

Wenn Sie können, passen Sie Ihren JSON so an, dass student_clubs ein Array von Objekten ist und jedes davon ein Array von Objekten ist, die die Unterkategorie string und eine Statuszeichenfolge enthalten. Sie brauchen kein Array für Done/Incomplete.

Answer 2

In Ihrer Json Art Eigenschaft ist kein Array, ist ein Objekt, und Objekte hat nicht die Kartenfunktion.
Ich verstehe nicht, warum Sie ein Array haben sollten, um den Zustand der Untereigenschaft (Sport oder Kunst) anzugeben. ich tun würde, wie folgt:

"student_clubs": [{ 
    "art":[ 
    { 
     "discipline":"illustration", 
     "status: "Done" 
    }, 
    { 
     "discipline:"Design", 
     "status":"Done" 
    } 
    ], 
    "sports":[ 
    { 
     "discipline":"Basketball", 
     "status":"Incomplete" 
    }, 
    { 
     "discipline":"Hockey", 
     "status":"whatever" 
    } 
    ] 
]} 

So, jetzt througth jeden Verein abbilden, und in jedem Verein können Sie througth jede „Disziplin“ Karte und tun, was Sie in einen einfacheren Weg wollen, denke ich.