When I add html code to the variable, it shows as Nan-CodePudding

 var test = "";
    for (var i = 0; i < controlResponse.classifications.length; i  ) {
        test ='<div role="option" aria-checked="false"  style="pointer-events: all;"><span >'   controlResponse.classifications[i].name   ' </span></div>';

    }
   
    for (var i = 0; i < controlResponse.fileList.length; i  ) {

        var htmlCode='<div >                                                                                                                                                      ' 
         '   <div class= "ten wide computer sixteen wide mobile ten wide tablet column">                                                                                                    ' 
         '   <h5 >                                                                                                                                                          ' 
         '       <i aria-hidden="true" ></i>                                                                                                       ' 
         '       <div >outlook_testler.docx</div>                                                                                                                             ' 
         '   </h5>                                                                                                                                                                           ' 
         '       </div > <div >                                                                                          ' 
         '       <div role="listbox" aria-expanded="false"  tabindex="0" style="float: right;">                                                                 ' 
         '           <div aria-atomic="true" aria-live="polite" role="alert" >Classification</div><i aria-hidden="true" ></i>               ' 
            '           <div >                                                                                                                      '  
             test 
            '           </div>                                                                                                                                                                  '  
         '   </div>                                                                                                                                                                      ' 
         '   </div>                                                                                                                                                                          ' 
            '   </div>';
        $("#classificationModalList").append(htmlCode);

         
    }

When I add html code to the variable, it shows as NaN. I add select item html codes to test variable then I added test variable inside htmlCode variable then I added test variable inside htmlCode variable

CodePudding user response：

Instead of joining all the strings using and ' you can use Template literals. Here I combined it with Array.prototype.map() – that is more readable too.

/* test data */
const controlResponse = {};
controlResponse.classifications = [{name:'class01'},{name:'class02'}];
controlResponse.fileList = ['file01', 'file02'];

var test = controlResponse.classifications.map(classification => {
  return `<div role="option" aria-checked="false"  style="pointer-events: all;">
            <span >${classification.name}</span>
          </div>`;
}).join('');

var htmlCode = controlResponse.fileList.map(file => {
  return `<div >
            <div >
              <h5 >
                <i aria-hidden="true" ></i>
                <div >outlook_testler.docx</div>
              </h5>
            </div>
            <div >
              <div role="listbox" aria-expanded="false"  tabindex="0" style="float: right;">
                <div aria-atomic="true" aria-live="polite" role="alert" >Classification</div>
                <i aria-hidden="true" ></i>
                <div >${test}</div>
              </div>
            </div>
          </div>`;
}).join('');

$("#classificationModalList").append(htmlCode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="classificationModalList"></div>