javascript - 使用文本和 span 标签创建动态 li 标签

Question

我有一个 JSON 数组，如下所示:

var teamDetails=[ 
 { "pType" : "Search Engines", "count" : 5},
 { "pType" : "Content Server", "count" : 1},
 { "pType" : "Search Engines", "count" : 1},
 { "pType" : "Business", "count" : 1,},
 { "pType" : "Internet Services", "count" : 1},
];

我想创建包含 JSON 数据的动态 ul 和 li 标签

我希望数据像这样放置:

<ul class="list-unstyled">
<li>
    ***Here the json ptype value***
    <span class="pull-right">
        <strong>
            <h5>***here json count value***</h5>
        </strong>
    </span>
</li>
</ul>

如何为每个数据动态获取此输出..？

我尝试使用此代码，但无法弄清楚如何附加文本 li 和 span 标记？

var clist=$('ul.list-unstyled')

dataProjectCount.forEach(function(a){
  a.count=a.count+" Projects";
  console.log(a.count);

  var li=$('<li/>').appendTo(clist);
  var aa=$('<span/>').addClass('pull-right').appendTo(clist);
});

Answer 1

创建映射输入 teamDetails 数组项的 li 元素，然后将它们附加到 ul 容器

const teamDetails=[ 
 { "pType" : "Search Engines", "count" : 5},
 { "pType" : "Content Server", "count" : 1},
 { "pType" : "Search Engines", "count" : 1},
 { "pType" : "Business", "count" : 1,},
 { "pType" : "Internet Services", "count" : 1},
];

const liElements = teamDetails.map(el => $(`<li>${el.pType}<span class="pull-right><strong><h5>${el.count}</h5></strong></span></li>`));
$('.list-unstyled').append(liElements);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-unstyled">
</ul>