我有一个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);
});

最佳答案

创建映射输入的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>

10-05 21:02
查看更多