如何通过与公共 id 的映射来构造 html 列表答案

【问题标题】：How to construct html list by mapping with common id如何通过与公共 id 的映射来构造 html 列表
【发布时间】：2019-09-20 03:57:06
【问题描述】：

我在构建 html 列表时遇到问题。

我期待与 (Expected output(Static) below:) 所示相同的结果

问题：具有相同值的comm_id应该构造1次

这就是我正在尝试的

var list = [
  {'com_id':12,'text':'Apple'},
  {'com_id':12,'text':'Banana'},
  {'com_id':91,'text':'cake'},
  {'com_id':91,'text':'cup cake'},
];

var dataMap = {}, str = '';

for(var i = 0; i < list.length; i++){
   if(!dataMap[list[i]['com_id']]) {
      dataMap[list[i]['com_id']] = list[i];
      str += '<li>com_id:'+list[i]['com_id']+'    <span>'+list[i]['text']+'</span><span>'+list[i]['text']+'</span></li>';
   }
}

$('#dynamic_const').html(str);

span{
  display:inline-block;
  padding:10px;
  margin:2px;
  background:#eee;
  border-radius:20px;
}

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

<p>Expected output(Static) Below:</p>

<div id="static">
  <ul>
      <li>com_id:12      <span>Apple</span><span>Banana</span></li>
      <li>com_id:91      <span>cake</span><span>cup cake</span></li>
  </ul>
</div>

请帮助我提前谢谢！！！

【问题讨论】：

一旦 com_id 存在于 dataMap 中，您的 if 语句将忽略元素

标签： javascript jquery html node.js

【解决方案1】：

var list = [
  {'com_id':12,'text':'Apple'},
  {'com_id':12,'text':'Banana'},
  {'com_id':91,'text':'cake'},
  {'com_id':91,'text':'cup cake'}
];

// group the text for each com_id
var reducedList = list.reduce( ( elements, element ) => {
  if ( !elements[ element.com_id ] ) {
    elements[ element.com_id ] = { com_id: element.com_id, text: [] }
  }
  
  elements[ element.com_id ].text.push( element.text );

  return elements;
}, {} );

console.log( reducedList );

// build the html

var newHTML = Object.values( reducedList ).map( element => {
  return `<li>com_id:${ element.com_id }<span>${ element.text.join( '</span><span>' ) }</span></li>`;
} );

console.log( newHTML );

【讨论】：

【解决方案2】：

如果您只想构建 HTML，可以使用 Jquery $.each

var html = '';
$.each(list, function(i, el){
    html += '<li>com_id:' + el.com_id + ' <span>' + el.text + '</span></li>';
});

$('#dynamic_const').html(html);

【讨论】：