未排序的列表项目符号未显示在预期的位置

Question

我下面的代码可以正常工作，其中我基于JSON响应显示信息（将其转换为数组后）。谁能告诉我代码片段下面的屏幕快照中提到的格式是否可以实现？现在，标题First Description对于与其关联的每个列表项都在重复。 Second Description也是如此。

var data_ = {
   "webservice_status":{
      "status":"SUCCESS",
      "message":""
   },
   "tableData":[
      {
        
         "type_id":553,
         "catDesc":"First Description",
         "myDataDesc":"First unordered list element of first description",
         "toolTip":"First unordered list element of first description"
        
      },
      {
        
         "type_id":554,
         "catDesc":"First Description",
         "myDataDesc":"Second unordered list element of first description",         
         "toolTip":"Second unordered list element of first description"
        
      },
      {
        
         "type_id":220,
         "catDesc":"Second Description",
         "myDataDesc":"First unordered list element of second description",
         "toolTip":"First unordered list element of second description"
         
      },
      {
        
         "type_id":201,
         "catDesc":"Second Description",
         "myDataDesc":"Second unordered list element of second description",
         "toolTip":"Second unordered list element of second description"
         
      },
      {
        
         "type_id":202,
         "catDesc":"Second Description",
         "myDataDesc":"3rd unordered list element of second description",
         "toolTip":"3rd unordered list element of second description"
         
      },
      {
        
         "type_id":255,
         "catDesc":"Second Description",
         "myDataDesc":"4th unordered list element of second description",
         "toolTip":"4th unordered list element of second description"
         
      },
      {
        
         "type_id":250,
         "catDesc":"Second Description",
         "myDataDesc":"5th unordered list element of second description",
         "toolTip":"5th unordered list element of second description"
         
      },
      {
        
         "type_id":300,
         "catDesc":"Third Description",
         "myDataDesc":"1st unordered list element of third description",
         "toolTip":"1st unordered list element of third description"
         
      },
      {
        
         "type_id":1,
         "catDesc":"Fourth Description",
         "myDataDesc":"1st unordered list element of 4th description",
         "toolTip":"1st unordered list element of 4th description"
         
      }
      
   ]
}


var json = data_.tableData;
const data = json.reduce((result, current) => {
              const entry = result.find(({ catDesc }) => current.catDesc === catDesc)
              const { catDesc, myDataDesc,toolTip } = current
                          
                if (entry) {
                entry.myDataDesc.push(myDataDesc);
                entry.toolTip.push(toolTip);
                
                
              } else {
                result.push({ catDesc, myDataDesc: [myDataDesc],toolTip:[toolTip] })
              }

              return result
            }, [])   
            
console.log(data);  

 for (var i = 0; i < data.length; i++) {
 for (var j = 0; j < data[i].myDataDesc.length; j++) {
$('#populateTable')
  .append('<tr height="30"><td width="33%" align="left"><u><b>'+data[i].catDesc+'</b></u><br></td></tr><tr height="5px"></tr><tr><td title="'+data[i].toolTip+'" width="33%" style="padding-left:40px;"><ul style="list-style-type:  disc"><li>'+data[i].myDataDesc[j]+'  </li><ul></td><td width="33%" align="left"><img src="images/DownloadImage.jfif" title="Download" alt="Download" width="20" height="20"></td></tr>');
  
  }
  }

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

但是它没有以以下所需格式显示。

Answer 1

这就是我想出的。

var outputtable = "";
for (var i = 0; i < data.length; i++) {
  var header = "";
  header += '<tr height="30"><td width="33%" align="left"><u><b>' + data[i].catDesc + '</b></u><br></td></tr><tr height="5px"></tr>';
  var contents = "";
  for (var j = 0; j < data[i].myDataDesc.length; j++) {
    contents += '<tr><td title="' + data[i].toolTip + 
    '" width="33%" style="padding-left:40px;"><ul style="list-style-type:  disc"><li>' + data[i].myDataDesc[j] + '  </li>';
    contents += '<ul></td><td width="33%" align="left"><img src="images/DownloadImage.jfif" title="Download" alt="Download" width="20" height="20"></td></tr>';
  }
  outputtable += header + contents
}
$('#populateTable').append(outputtable);

您的原始代码为每个i的每个j附加了标题和行。我发布的这段代码使用contents变量来收集单个标头下每一行的HTML。

我希望这个答案对您有用。