JSON 데이터 처리
-
promise를 .then으로 후속 처리
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
acountPages.forEach( page => { const ulMother = page.querySelector('.use_history_detail > ol') currMonth.then( logs => { const dayList = Array.from(new Set(logs.map(l => l.date))).reverse() const dayAccum = getDayListAccum() const detailList = dayList.map(day=> logs.filter(l => day === l.date)) function getDayListAccum () { return dayList.map(day=>{ let count = 0 logs.forEach(l => { if (day === l.date && l.income === 'out') count += l.price; }) return count }) } const html = dayList.map( (day, i) => { return pulsEl(day,dayAccum[i],detailList[i]) }).join('') ulMother.innerHTML = html }) }) function pulsEl (day,accum,list) { const date = parseInt(day.slice(8)) === today ? '오늘' : parseInt(day.slice(8)) === today - 1 ? '어제' : `${parseInt(day.slice(8))}일` const htmlH = ` <div> <span>${date}</span> <span>${numberWithCommas(accum)}원 지출</span> </div> ` const htmlC = list.map(l => { const {income,history,price} = l if (income === 'in') { return ` <li> <span>${history}</span> <span class="${income}">+ ${numberWithCommas(price)}</span> </li> ` } else { return ` <li> <span>${history}</span> <span class="${income}">${numberWithCommas(price)}</span> </li> ` } }).join('') return `<li>${htmlH}<ol>${htmlC}</ol></li>` }
메모
실제 사용 내역을 보면 지출이 없는 날도 있어서
없는 날은 어떻게 할지 생각해야 했다.
상세 부분이 복잡한 구조로 되어있어서 innerHtml로
추가된 내용을 배열에서 string으로 변환해서 덮어쓰기 하는 방식이
좋은지 궁금하다