how to insert json data dynamically into html elements

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>

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 come. please show me how to do it in javascript.it would be nice if you give jsfiddle link

Phani Kumar M · Accepted Answer · 2017-10-10 08:54:16Z

3

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

edited Oct 10, 2017 at 8:54

answered Oct 10, 2017 at 8:37

Phani Kumar M

4,5781 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rajesh Choudary Over a year ago

how to contact you if i need more help regarding this

Rajesh Choudary Over a year ago

may i know why gave var ele = $(".list-group a.item:first").parent().clone(); why its not working with this var ele = $(".list-group :first").parent().clone(); what is importance of a. item

Phani Kumar M Over a year ago

a.item gets handle to all a elements. a.item:first gets handle to first a element. Then I get parent of a which is li then clone the entire li.

Vipul Singh Over a year ago

super.. @phani kumar M, today I learnt some thing new thanks for the detailed explanation.

Rajesh Choudary Over a year ago

@PhaniKumarM I want your help to do similar stuff for big html section. I am trying to do same clone logic for that , but i am getting error. Instead of new question , Is there any other way you can help me for that

|

score 1 · Accepted Answer · 2017-10-10 08:12:12Z

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>

winterfall · Accepted Answer · 2017-10-10 07:53:24Z

0

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.

answered Oct 10, 2017 at 7:53

winterfall

16414 bronze badges

2 Comments

Rajesh Choudary Over a year ago

yeah but i already started project in simple javascript and jquery

winterfall Over a year ago

Then I suggest you may use the Vue framework, it's a progressive framework, you can add the vue js in the script tag, and just new a Vue object will done the data binding things, check out the hello world tutorial, vuejs.org/v2/guide

Vipul Singh · Accepted Answer · 2017-10-10 08:40:00Z

0

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.net/6w11Ln05/3/
you can add your design accordingly.

edited Oct 10, 2017 at 8:40

answered Oct 10, 2017 at 8:11

Vipul Singh

3931 gold badge10 silver badges26 bronze badges

3 Comments

user5093161 Over a year ago

Good one @Vipul Singh

Rajesh Choudary Over a year ago

its helpfull but problem is all the names are coming in one block if you do append. I need get 1st loop of json = 1 block, 2nd loop of json = next block.

Vipul Singh Over a year ago

that is because I have added that in one div if you want in separate block add div in the html code dynamically and add css to design properly.

Collectives™ on Stack Overflow

how to insert json data dynamically into html elements

4 Answers 4

7 Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related