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 elemnts中例如top10 [0] .branch应该进入html id topbranch。它应该循环。请看图片应该怎么样。请告诉我如何在javascript中做到这一点。如果你给jsfiddle链接

会很好

Answer 1

如果你有json数组，你需要遍历所有对象并读取它们的属性。

请试一试。

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>

    var myObj, i, j, x = "";
    myObj = {
        "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"
                  }
        ]
    }

    for (i in myObj.top10) {
    x += "<h2>" + myObj.top10[i].branch + "</h2>";
    x += "<h2>" + myObj.top10[i].job + "</h2>";
    x += "<h2>" + myObj.top10[i].culprit + "</h2>";
    }

    document.getElementById("demo").innerHTML = x;

</script>

</body>
</html>

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试使用具有数据绑定功能的现代javascript框架，它易于实现和优雅，您可以选择vue，Angular或React。

Answer 4

你可以试试这样的事情来迭代你的数据。

var html;

 $.each(data.top10,function(key1,value1){
html="<div><i id='topbranch'>"+value1.state+"</i><br>"
            +"<i id='topjob'>"+value1.job+"</i><br>"
            +" <i id='topculprit'>"+value1.culprit+"</i></div><br>"
 $("#divId").append(html)
 })

这里是小提琴：https://jsfiddle.net/6w11Ln05/3/
你可以相应地添加你的设计。

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

4 个答案: