javascript - 如何将json数据动态插入到html元素中

Question

{
      "top10": [
            {
                  "state": "red",
                  "claimed": true,
                  "branch": "release-2.3.4",
                  "job": "sdk",
                  "culprit": "Hansi Meier"
            },
            {
                  "state": "blue",
                  "claimed": true,
                  "branch": "master",
                  "job": "ibeo-cloud",
                  "culprit": "Karl Gustavo"
            },
            {
                  "state": "yellow",
                  "claimed": false,
                  "branch": "feature-abc",
                  "job": "appbase",
                  "culprit": "MAfred Auch"
            }
      ]
 }

<nav class="side-navbar">
        <div class="title">
          <h1>Top 10</h1>
        </div>

        <ul class="list-group">
          <a class="item d-flex align-items-center">
             
                <i class="fa fa-caret-up" style="font-size:48px;color:red"></i>
                <div class="item d-table-cell">
                 <i id='topbranch'></i>
                 <i id='topjob'></i>
                 <i id='topculprit'></i>
                </div>
                 <i class="fa fa-refresh" style="font-size:30px;color:yellow"></i>
                
            </a>
        
        </ul>
</nav>

我想将 json 数据插入到 html 元素中 例如top10[0].branch应该进入html id topbranch。 它应该循环。请看图片它应该如何出现。 请告诉我如何在 javascript 中执行此操作。如果您提供 jsfiddle 链接，那就太好了

Answer 1

您需要将 topbranch、topjob 和 topculprit 的所有 id 更改为 class，因为您将通过循环创建多个元素。 id 对于 HTML 文档中的任何元素都应该是唯一的。

希望下面的示例对您有用。你可以在JS代码中找到注释。您需要编写自己的 CSS 来根据屏幕截图显示项目。我在 ul 元素下添加了 li 元素。

var data = {
	"top10": [
		{
			"state": "red",
			"claimed": true,
			"branch": "release-2.3.4",
			"job": "sdk",
			"culprit": "Hansi Meier"
		},
		{
			"state": "blue",
			"claimed": true,
			"branch": "master",
			"job": "ibeo-cloud",
			"culprit": "Karl Gustavo"
		},
		{
			"state": "yellow",
			"claimed": false,
			"branch": "feature-abc",
			"job": "appbase",
			"culprit": "MAfred Auch"
		}
	]
};

$.each(data.top10, function (i, el) {
	var ele = $(".list-group a.item:first").parent().clone(); //Clone the first element
	ele.find(".topbranch").text(el.branch).css("color", el.state); //Update values
	ele.find(".topjob").text(el.job);
	ele.find(".topculprit").text(el.culprit);
	$(".list-group").append(ele); //Append cloned element to `list-group`
})
$(".list-group a.item:first").parent().remove(); //Remove first li

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="side-navbar">
	<div class="title">
		<h1>Top 10</h1>
	</div>

	<ul class="list-group"  style="list-style-type: none;">
		<li>
			<a class="item d-flex align-items-center" style="display: flex; justify-content: space-evenly;">
				<i class="fa fa-caret-up" style="font-size:48px;color:red"></i>
				<div class="item d-table-cell">
					<i class='topbranch'></i><br/>
					<i class='topjob'></i><br/>
					<i class='topculprit'></i><br/>
				</div>
				<i class="fa fa-refresh" style="font-size:30px;color:yellow"></i>
			</a>
		</li>
	</ul>
</nav>