Javascript Loops: For-Schleife funktioniert, aber nicht zuordnen?

Question

Ich arbeite mit MockData für eine Webanwendung und ich versuche, verschachtelte Objekte zu durchlaufen. Mein Problem ist, dass eine for-Schleife funktioniert, aber nicht array.map und weiß nicht warum.

ist die for-Schleife:

for (let i = 0; i < fakeChartData.length; i++) { 
    for (let j = 0; j < fakeChartData[i].poll.length; j++) { 
     if (fakeChartData[i].poll[j].id === id) { 
     return fakeChartData[i].poll[j] 
     } 
    } 
    } 

Und hier ist die Karte Schleife:

fakeChartData.map(data => { 
    data.poll.map(data => { 
     if (data.id === id) { 
     return data; 
     } 
    }); 
    }); 

Meine Datenstruktur:

fakeChartData = [ 
    { 
    id: '232fsd23rw3sdf23r', 
    title: 'blabla', 
    poll: [{}, {}] 
    }, 
    { 
    id: '23dgsdfg3433sdf23r', 
    title: 'againBla', 
    poll: [{}, {}] 
    } 
]; 

Ich versuche, die spezifisch zu laden Objekt mit der ID, die an onClick-Methode übergeben wird. Hier ist die volle Funktion:

export const fetchPollOptById = (id) => 
    delay(500).then(() => { 
    for (let i = 0; i < fakeChartData.length; i++) { 
     for (let j = 0; j < fakeChartData[i].poll.length; j++) { 
     if (fakeChartData[i].poll[j].id === id) { 
      return fakeChartData[i].poll[j] 
     } 
     } 
    } 
}); 

Answer 1

unterstützen müssen, wenn ich über das, was Sie Recht habe sind versuchen sollte zu tun, diese Arbeit:

return fakeChartData.reduce((acc, data) => acc.concat(data.poll), []) 
        .filter(pollObj => pollObj.id === id)[0] 

Zuerst wird ein Array macht Objekte aus verschiedenen Datenobjekten alle Umfrage enthält, dann filtert es ihnen die mit der richtigen ID und ret zu finden urns dieses Objekt.

Warum Ihr Ansatz mit map nicht funktioniert: Sie verwenden es in der falschen Weise. Was map tut es, um eine Funktion zu übernehmen und auf jedes Mitglied eines Arrays anzuwenden.

Hier ist ein Array und Funktion der Art wie Sie folgende Aufgaben:

const arr = [1,2,3] 
const getThingById(id) => { 
    var mappedArray = arr.map(x => { 
    if(x === id) return x 
    }) 
    console.log(mappedArray) // [3] 
} 
getThingById(3) // undefined 

Das wird nicht funktionieren. getThingById hat keine Rückgabeanweisung. Die Rückgabeanweisung return x ist und gibt etwas von der Funktion zurück, die in die Karte übergeben wurde. Grundsätzlich sollten Sie nicht map verwenden, um zu tun, was Sie versuchen zu tun. map ist für, wenn Sie ein Array zurückgeben möchten.

Answer 2

Versuchen Sie, diese

fakeChartData.map(data => { 
    var result = data.poll.map(data => { 
     if (data.id === id) { 
     return data; 
     } 
    }); 
    return result; 
    }); 

Es sollte funktionieren. Und ja, du solltest find() anstelle von map() verwenden, denke ich.

Answer 3

Ein bisschen lang Implementierung:

let results = fakeChartData.map(data => { 
    let innerResult = data.poll.filter(data => { 
     if (data.id === id) { 
     return data; 
     } 
    return innerResult.length ? innerResult[0] : null; 
    }); 
    }) 
    .filter(x => (x !== null)); 
let whatYouwant = results.lenght ? results[0] : null; 

Wenn Sie verwenden können() finden es schöner aussehen würde, aber das hängt davon ab, welche Browser Sie

Answer 4

Eine return-Anweisung innerhalb einer for-Schleife bewirkt, dass Ihre Funktion zurückkehrt. Eine Rückgabebefehlsanweisung in einem Callback der Funktion .map() gibt jedoch nur den Rückruf zurück, und dieser zurückgegebene Wert wird dann in das neue Array eingefügt. Bitte sehen Sie die documentation. Wenn Sie wirklich verwenden möchten.map(), können Sie es wie folgt tun:

export const fetchPollOptById = (id) => { 
    var result; 
    fakeChartData.map(data => { 
     data.poll.map(data => { 
      if (data.id === id) { 
       result = data; 
       return data; 
      } 
     }); 
    }); 
    return result; 
} 

Anmerkung: Ich gehe davon aus, dass Ihre Umfrage Objekte wie dieses ein ID-Feld haben:

fakeChartData = [ 
     { 
      id: '232fsd23rw3sdf23r', 
      title: 'blabla', 
      poll: [ 
       {id: 'pollId1', otherField: 'blah'}, 
       {id: 'pollId2', otherField: 'blah'} 
      ] 
     }, 
     { 
      id: '23dgsdfg3433sdf23r', 
      title: 'againBla', 
      poll: [ 
       {id: 'pollId3', otherField: 'blah'}, 
       {id: 'pollId4', otherField: 'blah'} 
      ] 
     } 
    ]; 

Anschließend können Sie die Umfrage-Daten wie diese erhalten :

fetchPollOptById("pollId3"); //returns {id: "pollId3", otherField: "blah"}