standard way to generating html for json arrays in jquery

Question

i am trying to generate html for the json returned array of users.. I want to do it the following way but I don't feel this is very effecient way to do this job. please review the following code and tell me whether i sould use some templated code or is there any standard for this scenario?

                  success: function(e){
       console.log(e);
       console.log(e.d[0].UserName);

       var position2= $("#searchtextbox").position();
       $('<div/>',
        {
          id:'generatedsearchdiv', 
          css:{
              position:'absolute',
              left:position2.left, 
              top:position2.top+20
              }

         }).appendTo('#searchArea');

       for (var i=0; i<=e.d.length; i++)
       {
       $('<div/>', 
            {

            html:"<span>"+e.d[i].UserName+"<span>"
            }).appendTo('#generatedsearchdiv');

       }

       }

Users objects array returned from Webservice in asp.net and the Users have Name, ImageUrl, UserId Properties. — Spirals Whirls, Apr 15 '13 at 16:05
Are you looking for something like KnockoutJS http://knockoutjs.com/ it allows you to bind JSON to HTML templates? — Luke Baughan, Apr 15 '13 at 16:11

score 0 · Answer 1 · answered Apr 15 '13 at 16:18

0

You can go with Jquery templates for this..

answered Apr 15 '13 at 16:18

Vatan Aggarwal

36
3

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

This method is "okay" for small bits of HTML, like <span>{data}</span>. However, if you have much more than that, it really is best for maintainability to use a templating solution. Check out this answer for options.

edited May 23 '17 at 12:12

Community

1
1

answered Apr 15 '13 at 16:21

Dave Thieben

5,388
2
28
38

Yes I am upto like neat code.. the above way seems messy and definitely this code is going to grow.. – Spirals Whirls Apr 15 '13 at 16:23

score 0 · Answer 3 · answered Apr 15 '13 at 18:14

I have not been sold on the current templating solutions. If you aren't either, you can get a quick string formatter if you put this code inline:

String.prototype.format = function() {
    var pattern = /\{\d+\}/g;
    var args = arguments;
    return this.replace(pattern, function(capture) {return args[capture.match(/\d+/)]; });
}

You can define formatting strings like so:

var formatHTML = '<span>{0}</span>';

Then use it something like this:

$('#generatedsearchdiv').append(formatHTML.format(e.d[i].UserName));

standard way to generating html for json arrays in jquery

3 Answers3