javascript - 如何在对象数组的内部嵌套中用groupid包装组

Question

我想用 groupid wrap 组 span 进入对象数组

预期输出:

<div id="wrapper">
   <span class="group-wrapper" data-groupid="3333333333333333">
      <p>Name : ABC</p>
      <p>Name : AABBCC</p>
   </span>
   <span class="group-wrapper" data-groupid="5555555555555555">
      <p>Name : DEF</p>
   </span>
   <span class="group-wrapper" data-groupid="7777777777777777">
      <p>Name : GHI</p>
   </span>
</div>

注意:观察到 data-groupid 具有值(value)，但在我的代码中我无法获得它。 (我不想要 data-groupid 的任何随机值，我想要精确值)

注意 2: 我无法更改 json structure，因为我的许多应用程序都在使用它(我无法控制)

我的代码生成:

<div id="wrapper">
   <span class="group-wrapper" data-groupid="">
      <p>Name : ABC</p>
   </span>
   <span class="group-wrapper" data-groupid="">
      <p>Name : DEF</p>
   </span>
   <span class="group-wrapper" data-groupid="">
      <p>Name : GHI</p>
   </span>
</div>

这是演示:

var array = [
   {"list":[{"id":"3333333333333333","name":"ABC"},{"id":"3333333333333333","name":"AABBCC"}]},
   {"list":[{"id":"5555555555555555","name":"DEF"}]},
   {"list":[{"id":"7777777777777777","name":"GHI"}]},
];

var fullHtmlStr = '', groupStr = '';
for(var i = 0; i < array.length; i++){
   var tempGroupWrapper = '<span class="group-wrapper" data-groupid="">';
   var list = array[i].list;
   for(j = 0; j < list.length; j++){
      var item = list[j];
      console.log(item);
      fullHtmlStr = '<p>Name : '+item.name+'</p>';
      tempGroupWrapper += fullHtmlStr;
   }
   tempGroupWrapper += '</span>';
   groupStr += tempGroupWrapper;
}

console.log(groupStr);

$('#wrapper').html(groupStr);

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

</div>

Answer 1

像这样？我将 tempGroupWrapper 移入循环并将 item.id 放入 groupid 中。

var array = [
   {"list":[{"id":"3333333333333333","name":"ABC"},{"id":"3333333333333333","name":"AABBCC"}]},
   {"list":[{"id":"5555555555555555","name":"DEF"}]},
   {"list":[{"id":"7777777777777777","name":"GHI"}]},
];

var groupStr = '';
for(var i = 0; i < array.length; i++){
   var fullHtmlStr = '';
   var list = array[i].list;
   for(var j = 0; j < list.length; j++){
      var item = list[j];
      console.log(item);
      fullHtmlStr += '<p>Name : '+item.name+'</p>';
   }
   var tempGroupWrapper = '<span class="group-wrapper" data-groupid="' + item.id + '">';
   tempGroupWrapper += fullHtmlStr + '</span>';
   groupStr += tempGroupWrapper;
}

console.log(groupStr);

$('#wrapper').html(groupStr);

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

</div>