Javascript 루프 : for 루프는 작동하지만 맵핑하지 않습니다?

Question

웹 응용 프로그램 용 mockData를 사용 중이며 중첩 된 객체를 반복하려고합니다. 내 문제는 for 루프가 작동하지만 array.map이 아니며 이유를 모른다는 것입니다. 여기

는 for 루프입니다 :

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

을 그리고 여기지도 루프 :

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

내 데이터 구조 : 나는 특정을로드하기 위해 노력하고있어

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

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

참고 :

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

당신은 다음과 같은 설문 조사 데이터를 얻을 수 있습니다 : 나는 또한 설문 조사의 목적이 같은 id 필드가 있다고 가정 :

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