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

debugcn 发表于 Dev

约翰

我有以下代码工作正常，我根据 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>

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

范范

这就是我想出的。

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。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。