mustache.js 리스트안에 리스트 파싱하기

1️⃣ template 작성

- 아래와 같이 리스트 안에 맵, 맵 안에 리스트를 가진 구조의 데이터를 파싱 할 것이다.

[
    {
        "date":"",
        "time":"",
        "categoryName": "",
        "keyword" : [
            "keyword1",
            "keyword2",
            "keyword3"
        ]
    }
]

 

<script id="trTemplate" type="x-tmpl-mustache">
{{#assessmentList}}
    <tr>
        <td>
            <em class="natural">
            {{date}}
            <br />
            {{time}}
            </em>
        </td>
        <td>{{categoryName}}</td>
        <td>
            {{#keywords}}
            <span class="keyword">{{.}}</span>
            {{/keywords}}
        </td>
    </tr>
{{/assessmentList}}
</script>

2️⃣ 데이터 파싱하기

async function drawAssessmentList(assessmentList) {
    let template = document.getElementById("trTemplate").innerHTML;
    Mustache.parse(template);
    _.forEach(assessmentList, (assessment, i) => {
        let keywords = assessment.keywordList.split(",");
        assessmentList[i].keywords = keywords;
        let date = moment(assessment.startDate).format('YYYY-MM-DD');
        let time = moment(assessment.startDate).format('HH:MM:SS');
        assessmentList[i].date = date;
        assessmentList[i].time = time;
 })

    let rendered = Mustache.render(template, { assessmentList : assessmentList });
    document.getElementById('estimateTable').innerHTML = rendered;
}