javascript - 如何使用对象数组的内部嵌套中获得的groupid来包装组

Question

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

预期输出:

<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 结构，因为它被我的许多应用程序使用(我无法控制)

我的代码生成:

<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>