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的价值，但是在我的代码中我无法获得它。 （我不需要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>

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

1 个答案: