이 제목만 보고 내용이 이해가는 사람이 있을까 싶지만 내가 하고 싶었던 기능이었다
시작날짜와 끝날짜는 유저가 데이트피커로 선택한 날짜고 그 사이에 있는 날짜별 데이터들을 받아왔다
받아오고 보니 DB에 값이 없는 날짜는 배열안에 존재하지 않았다
하지만 나는 DB에 존재하지 않는 날은 0으로 보여줘야했기에 배열안에 없는 날짜를 추가해주어야 했다
목적 파악 완료!
export default function getDatesStartToLast(
startDate: string,
endDate: string
) {
const result = [];
const curDate = new Date(startDate);
while (curDate <= new Date(endDate)) {
const date = curDate.toISOString().split("T")[0];
result.push(date);
curDate.setDate(curDate.getDate() + 1);
}
return result;
}
내가 만든 이 함수는 시작 날짜부터 끝날짜까지 사이의 모든 날짜를 배열에 담아 return하는 함수이다
필요하다면 가져가서 맘껏 쓰시길,,,ㅎㅎ
위의 함수에서 return된 배열과 백엔드에서 받아온 배열을 비교하여 없는 날짜는 넣어주고 그 값은 0으로 처리하면 마무리 되는 것이었다
const arrFunction = (dateArr: string[], getDataArr: string[]) => {
const arr: string[] = [];
dateArr.forEach((el) => {
const name = data ? getDataArr.indexOf(el) : [];
if (name === -1) {
arr.push(el);
}
});
const newArr = arr
.map((el, i) => {
return { cntDate: el, exportCnt: 0, studyCnt: 0 };
})
.concat(data || [])
// @ts-ignore
.sort((a, b) => new Date(a.cntDate) - new Date(b.cntDate));
return newArr;
};
indexOf
를 통해 없는 날짜는 새배열에 넣어주고 map
을 통해 객체의 cntDate에 없는 날짜 추가 와 함께 exportCnt와 studyCnt는 0이라고 넣어주었다
그 다음에 기존의 data와 concat
을 통해 합쳐주었고 sort
를 통해 날짜순으로 정렬를 해주면 완성..!
말하고 보니 더 간단하게 구현할 수 있지 않을까 했지만 그래도 머리를 많이썼던 로직이었다