Schleife durch Objekt - reagieren & Firebase

Question

Ich bin neu in diesem ein bisschen Zeug, also ertragen Sie mit mir.

Ich bin ein Objekt von Firebase empfangen, die wie folgt aufgebaut ist:

{ 
    "news" : { 
    "BBC news" : { 
     "id" : 1, 
     "title" : "BBC News" 
    }, 
    "CNN News" : { 
     "id" : 2, 
     "title" : "CNN News" 
    }, 
    "title" : "News" 
    }, 
    "animals" : { 
    "Horse" : { 
     "id" : 3, 
     "title" : "Horse" 
    }, 
    "title" : "Animals" 
    } 
} 

ich benutze reagieren und soll durch diese Daten in einer Schleife und machen etwa so:

News 
- BBC News 
- CNN News 

Animals 
- Horse 

I habe es geschafft, die Haupttitel mit diesem Code durchzulaufen:

Object.values(this.state.datas).map((data, i) => <li key={i}> {data.title} </li> 

Das JSON-Objekt ist t zugeordnet er gibt "Daten" an. Vorschau von dem, was im Moment gemacht wird:

News 
Animals 

ich die Eltern Titel bekommen haben, aber nicht sicher, wie das Kind Titel sowie zu bekommen.

Weiß jemand, wie ich gehe, um das Ergebnis zu bekommen, das ich will? Danke, tut mir leid, wenn ich falsche Schlüsselwörter verwendet habe.

Answer 1

Angenommen, Sie können nicht Ihre Datenstruktur manipulieren, versuchen Sie so etwas wie dies mit Ihren Daten tun:

Object.values(this.state.datas).map((data, i) => { 

    // obtain the categories, i.e. bbc, cnn from the entry 
    let categories = Object.keys(data); 

    // pop the "title" key so it doesn't get returned 
    categories.pop(); 

    return (
     <li> 
     {data.title} 
     <ul> 
      {categories.map((category, i) => <li key={i}>{category}</li>)} 
     </ul> 
    </li> 
); 
}); 

Dies sollte ohne dass gute Arbeit von Firebase Ihre Datenstruktur zu ändern. Lass es mich wissen, wenn das funktioniert! Schau es dir bei diesem Stackblitz-Link an: https://stackblitz.com/edit/react-szbop7.