[JavaScript] 템플릿 리터럴(백틱) - 반복문 + IF문 + 변수매핑 방법

 

예제코드

var prblmTag = '';
while(qitemIdx < resultList.length){
    prblmTag += `<div class="reg">`;

    if(resultList[qitemIdx].orignlFileNm === null){
        prblmTag += `<input type="file" name="quiz[0].file" class="input_file form-control" title="" class="w50p">`;
    }else{
        prblmTag += `
                    <input type="hidden" name="quiz[0].atchFileId" value="\${resultList[qitemIdx].atchFileId}">
                    <input type="hidden" name="quiz[0].fileSeSn" value="\${resultList[qitemIdx].fileSeSn}">
                    <a href="/bos/cmmn/file/fileDown.do?atchFileId=\${resultList[qitemIdx].atchFileId}&fileSn=\${resultList[qitemIdx].fileSeSn}">\${resultList[qitemIdx].orignlFileNm}</a>
                    <button type="button" name="fileDelBtn" data-evlsn='\${resultList[qitemIdx].evlSn}' data-prblmsn='\${resultList[qitemIdx].prblmSn}' data-atchfileid='\${resultList[qitemIdx].atchFileId}' data-filesesn='\${resultList[qitemIdx].fileSeSn}' data-prblmtypecd='\${resultList[0].prblmTypeCd}' class="btn btn-danger btn-sm"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
                    `;
    }

 

1. resultList는 ajax통신 후 return받은 data.resultList라고 보면된다.

2. 백틱 안에 변수매핑은 \${data.변수} 이렇게 하시면 된다.

3. CSS가 깨진다면 부분주석 해가면서 어느부분이 오류인지 확인해라.

4. 나는 백틱을 += 로 붙여넣은 다음 최종 $("#대상").append(prblmTag);  최종했다.