Javascriptループ：forループは動作しますが、マップは動作しませんか？

Question

私はWebアプリケーション用のmockDataを使用しています。ネストされたオブジェクトをループするようにしています。私の問題は、forループは動作しますが、array.mapではなく、なぜか分からないということです。ここで

は、ループのためである：私は特定のロードしようとしている

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

：

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

マイデータ構造：

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

そしてここでは、マップのループでありますonClickメソッドで渡されたIDを持つオブジェクト。ここ は、フル機能である：

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

をサポートする必要があるブラウザものに依存している場合やろうとして再」、これは動作するはずです：

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

最初に、それはすべての投票を含む配列を作る異なるデータオブジェクトからオブジェクトを、それが正しいIDとRETを持つものを見つけるために、それらをフィルタリングしますそのオブジェクトを返す。

mapを使用してあなたのアプローチがうまくいかない理由として、間違った方法で使用しています。 mapは何をして、配列のすべてのメンバーに関数を適用します。

は、ここで配列だとあなたのような種類の機能：これは動作しません

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 

。 getThingByIdにはreturn文がありません。 return文return xはに渡された関数から何かを返すです。基本的には、あなたがしようとしていることを行うにはmapを使用すべきではありません。 mapは、配列を返す場合に使用します。

Answer 2

は、それが動作するはずです。この

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

を試してみてください。そして、ええmap()の代わりにfind()を使用する必要があります。

Answer 3

ビット長の実装：

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; 

あなたはそれがよりよいなります）（見つける使用することができますが、それは私があなたのものについて権利だ場合は、

Answer 4

forループ内のreturn文は、関数を返します。ただし、.map（）関数のコールバック内のreturn文はコールバックを返すのみで、この戻り値は新しい配列に配置されます。 documentationをご覧ください。本当に使用したい場合は。

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

注：私もあなたのポーリングオブジェクトは、このようなidフィールドを持っていることを前提としています

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'} 
      ] 
     } 
    ]; 

あなたは、このような世論調査のデータを取得することができますマップ（）、あなたはこのようにそれを行うことができます：

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