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

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

I want to insert my json data into html elemnts for example top10[0].branch should go into html id topbranch. and it should loop. please see the image how it should e. please show me how to do it in javascript.it would be nice if you give jsfiddle link

• javascript
• jquery
• html
• json

4 Answers 4

You need to change all id to class for topbranch, topjob and topculprit as you will be creating multiple elements through loop. The id should be unique for any element in HTML document.

Hope the below sample works for you. You can find ments in JS code. You need to write your own CSS to display the items as per your screen shot. I have added li element under ul element.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

If you have json array you need to just loop through all objects and read their properties.

Please try this.

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

Try using a modern javascript framework with data binding feature, it's easy to implement and elegant, you can choose from vue, Angular or React.

You can try some thing like this iterate over your data.

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

here is the fiddle : https://jsfiddle/6w11Ln05/3/
you can add your design accordingly.