How to bind json data into Span tag using Javascript

Question

I have a json like below

[
 {"label":"Finder1","count":3},
 {"label":"Finder2","count":1},
 {"label":"Finder1 & Finder2","count":1}
]

I want to show the data in frontend in span tag. for ex:

Finder1 (3)
Finder2 (1)
Finder1 & Finder2 (1)

Please help me the little java script to achieve this.

Suchit kumar · Accepted Answer · 2015-12-23 13:11:23Z

2

Try this:Loop through the data and construct the desired string with it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">
    var counter = 0;
    $(function(){
    	var arr=[
    	 {"label":"Finder1","count":3},
    	 {"label":"Finder2","count":1},
    	 {"label":"Finder1 & Finder2","count":1}
    	];
        var str='';
    	$.each(arr,function(index){
         str=str+arr[index].label+" ("+arr[index].count+")<br>";
    	});

    	$("#data").html(str);
    });
    </script> 

    <body>
    <span id="data"></span>
    </body>

answered Dec 23, 2015 at 13:11

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

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

Comments

Andy · Accepted Answer · 2015-12-23 13:15:16Z

1

Use a simple map:

var html = '<span>' + arr.map(function (el) {
  return [el.label, ' (', el.count, ')'].join('');
}).join('<br/>') + '</span>';

document.body.insertAdjacentHTML('beforeend', html);

DEMO

answered Dec 23, 2015 at 13:15

Andy

63.6k13 gold badges72 silver badges99 bronze badges

1 Comment

sen Over a year ago

Thank you aundy..it helped me to drive in fine tune.

Collectives™ on Stack Overflow

How to bind json data into Span tag using Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related