Daten: von StandardcodeSchleife ein Objekt in reagieren?
I-Daten habe, die in Arrays haben, versuche ich Schleife:
<div className="loop-container">
{
joblist.map((itemb,index) => (
<div>
</div>
))
}
</div>
ich zeigen will Namen, dass ersten Arrays (dies ist Datum), dann zeigen, was diese Arrays bestehen, aber ich Fehler:
joblist.map is not a function
Direkt können wir verwenden nicht map, filter auf Objekt, zuerst müssen wir ein Array (entweder Eigenschaft oder Eigenschaftswerte) von diesem Objekt dann nur wir können.
Daten, die Sie bekommen, ist kein Array, so direkt wir nicht Array.prototype.map verwenden können. Was Sie tun müssen, ist zuerst Object.keys zu verwenden, um alle Schlüssel in einem Array zu erhalten. Sobald Sie das Array erhalten verwenden Sie map auf und innerhalb map Funktion Körper verwenden Sie eine andere map, um die Werte zu iterieren.
Sie können auch Object.values oder Object.entries verwenden, aber das Muster ist nicht dasselbe wie Object.keys().
schreiben es so:
<div className="loop-container">
{
Object.entries(joblist).map(([key, value]) => (
<div id={key}>
Date: {key}
{
value.map(el => <div key={el.id}> {el.created_time} </div>)
}
</div>
))
}
</div>
prüfen diese Snippet Mit Object.entries:
let obj = {
'key1': [{a:1}, {a:2}, {a:3}],
'key2': [{a:4}, {a:5}, {a:6}],
'key3': [{a:7}, {a:8}, {a:9}]
};
Object.entries(obj).map(([key, value]) => {
console.log('key name = ', key);
value.map(el => {
console.log(el.a);
})
})prüfen diese Snippet Mit Object.keys:
let obj = {
'key1': [{a:1}, {a:2}, {a:3}],
'key2': [{a:4}, {a:5}, {a:6}],
'key3': [{a:7}, {a:8}, {a:9}]
};
Object.keys(obj).map(key => {
console.log('key name = ', key);
obj[key].map(el => {
console.log(el.a);
})
})prüfen diese Snippet Object.values Verwendung:
let obj = {
'key1': [{a:1}, {a:2}, {a:3}],
'key2': [{a:4}, {a:5}, {a:6}],
'key3': [{a:7}, {a:8}, {a:9}]
};
Object.values(obj).map(value => {
console.log('value = ', JSON.stringify(value));
value.map(el => {
console.log(el.a);
})
})ID ist nicht definiert, denkt, müssen hinzufügen ID –
oh Entschuldigung, es sollte sein 'key = {el.id}' nicht '{id}', aktualisiert die Antwort. –
Wie Sie joblist sehen, ist nicht Array, es Objekt ist. Wenn Sie wirklich map verwenden möchten, können Sie new Map() verwenden. Der new Map()-Konstruktor akzeptiert einen iterierbaren Eintrag. Mit Object.entries können Sie bequem von Objekt konvertieren Karte:
var mapjoblist = new Map(Object.entries(joblist));
<div className="loop-container">
{mapjoblist.map((itemb,index) => (
<div>
.......
</div>
))}
</div>
Ist 'joblist' das ** Objekt **, dass Sie in Ihrem Screenshot sind zeigt? –
Um fair zu sein, hat die Konsole Ihre Antwort. Wie Sie deutlich sehen können, ist die 'Jobliste' ein Objekt, bei dem die Schlüssel Daten und kein Array sind. – GillesC
So wie @GillesC bereits gesagt: Es ist kein Array, es ist ein Objekt. –