1
\$\begingroup\$

I am doing a college project and I would like to write my jQuery code following best practices. The project involves using the jQuery .getJSON method to retrieve information from a json file. I have left out parts of the code so that it is more readable (however this is indicated in the comments).

The code shows two approaches I have come up with:

  1. In the first approach, I define a variable which contains HTML code and inserts this dynamically when making a call to the JSON file. I then do a small amount of DOM manipulation with this.
  2. In the second approach I don't need to define the variable at all. However, there is slightly more jQuery DOM manipulation when retrieving the information from the json file. also I'm not sure if what I have done is a bit 'hacky'.

Do you have any advice on which way would be better practice to do?

Option 1:

$(document).ready(function(){

//define a variable which contains html code that will be inserted dynamically depending on the contents of the json
        var gift_love_template =    '<span class="gift love-gift">' +
                            '<i class="fa fa-heart" aria-hidden="true"></i>' +
                            '<!--quantity of the gift will be dynamically inserted here-->' +
                        '</span>';

        //the following code is inside the call to the JSON file:
        $.each(profile.posts, function(i, post){
            var quantity_love = post.gifts.love;    //number of loves is stored in the gifts array within the post object.

            if(quantity_love != 0){
                var love_title = "" + quantity_love + " loves received"; //create a string for the title attribute
                $("#" + post_id + " .gift-area").append(gift_love_template);
                $("#" + post_id + " .love-gift").attr("title", love_title).append("(" + quantity_love + ")");
            }

        });
});

Option 2:

$(document).ready(function(){

    //the following code is inside the call to the JSON file:

        $.each(profile.posts, function(i, post){
            var quantity_love = post.gifts.love;    //number of loves is stored in the gifts array within the post object.

            if(quantity_love != 0){
                var love_title = "" + quantity_love + " loves received"; //create a string for the title attribute
                $('<span><i class="fa fa-heart" aria-hidden="true"></i>(' + quantity_love + ')</span>').attr("class", "gift").attr("title", love_title).appendTo("#" + post_id + " .gift-area");
            }

        });
});
\$\endgroup\$

1 Answer 1

3
\$\begingroup\$

I suggest you put the template html in an invisible div in the page html. Then reference and clone it from javascript. Then replace "tags" with data from the json request and insert the new html in the page at the appropriate place.

You can then redesign the page without touching the javascript code.

\$\endgroup\$
3
  • \$\begingroup\$ Thanks. But I am actually generating full pages dynamically. and the html i posted above will be part of these dynamic pages. I have the "page template" stored in a variable too. maybe i should put the <span> html inside that (as you said in an invisible div) instead of having two separate variables. thanks \$\endgroup\$
    – Sarah
    May 11, 2016 at 14:14
  • 1
    \$\begingroup\$ The problem with writing the html directly in a variable is when you want to make changes it gets really hard to get an overview. Is it not possible to write the page template in a file and load the entire file into a variable instead? Then you can use any editor to redesign your page. \$\endgroup\$ May 11, 2016 at 14:17
  • \$\begingroup\$ I see what you mean. it is probably better to do that. I will try that. thanks \$\endgroup\$
    – Sarah
    May 11, 2016 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.