如何迭代最终分析并在表格中显示月份名称及其值

Question

{
  
  finalAnalysis: [
    { January: {total:0,totalDiscount:0,totalRevenue:0}},

    { February:{total:0,totalDiscount:0,totalRevenue:0} },


    { March:{total:0,totalDiscount:0,totalRevenue:0} },

    { April:{total:0,totalDiscount:0,totalRevenue:0} },

    { May:{total:0,totalDiscount:0,totalRevenue:0} },
  ]
}

Answer 1

您可以使用辅助方法和模板文字首先生成行，然后从行中生成表，最后将表写入正文中：

function getAnalysisItemTemplate(month, item) {
    return `<tr>
                <td>${month}</td>
                <td>${item.total}</td>
                <td>${item.totalDiscount}</td>
                <td>${item.totalRevenue}</td>
            </tr>`;
}

function getAnalysisTableTemplate(analysis) {
    let rows = [];
    for (let r of analysis.finalAnalysis) {
        for (let key in r) {
            rows.push(getAnalysisItemTemplate(key, r[key]));
        }
    }
    return `<table><tbody>${rows.join("")}</tbody></table>`;
}

let analysis = {

finalAnalysis: [ { January: {total:0,totalDiscount:0,totalRevenue:0}},

{ February:{total:0,totalDiscount:0,totalRevenue:0} },


{ March:{total:0,totalDiscount:0,totalRevenue:0} },

{ April:{total:0,totalDiscount:0,totalRevenue:0} },

{ May:{total:0,totalDiscount:0,totalRevenue:0} },

] }

document.body.innerHTML = getAnalysisTableTemplate(analysis);