jQuery - Pass HTML with JS variable as parameter

Question

I have a namespace called "X" and it has a getJSON function that fetches some file from the server. I want to reuse this namespace with varying contents. Here is the code:

var uid = "27D76901-B6B1-B332-918B-D9F5A7152EFC";
var X = {
    el: "",
    elMarkup: "",
    url: "",
    initialize: function(el, elMarkup, url){
        $.getJSON(url, function(data){
            el.find("p").remove().end();
            $.each(data.comments, function(key, value){
                el.append(elMarkup);
            })
        })
    }
};

X.el = $("#comments");
X.elMarkup = "<p>"+ value.content +" by "+ value.user +"</p>";
X.url = "http://example.com/getComments?uid=" + uid;
X.initialize(X.el, X.elMarkup, X.url);

I am having a problem with the elMarkup variable for the $.each loop. How can I define this variable dynamically? Thanks!

X.elMarkup = "<p>"+ value.content +" by "+ value.user +"</p>"; will give you undefined for both variables as they are not defined outside the function. — hjpotter92
– hjpotter92, Commented May 20, 2013 at 9:38
@nnnnnn If I am going to define the value variables inside the loop, then I will not be able to reuse the namespace. Other json results does not contain the same array. I need the loop to accept varying value variables. — fart-y-goer
– fart-y-goer, Commented May 20, 2013 at 9:40

nnnnnn · Accepted Answer · 2013-05-20 09:45:52Z

1

You could try this:

X.elMarkup = function(value) {
   return "<p>"+ value.content +" by "+ value.user +"</p>";
};

And then in your $.getJSON() callback:

        $.each(data.comments, function(key, value){
            el.append(elMarkup(value));
        });

That is, instead of defining X.elMarkup as a string, define it as a callback function that generates the particular html structure you need. Then your generic initialize() function just has to call elMarkup() and pass the current value that needs formatting.

Note that it doesn't really make sense to set the properties as X.el = ... if you're just going to pass those properties as arguments to the X.initialize() function. It would make more sense to just pass the required values directly and have X.initialize() save the values as properties if needed. Or set the properties and call X.initialize() with no arguments.

edited May 20, 2013 at 9:45

answered May 20, 2013 at 9:40

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

Comments

hjpotter92 · Accepted Answer · 2013-05-20 09:41:04Z

1

Change the following:

$.each(data.comments, function(key, value){
    el.append(elMarkup);
})

to

$.each(data.comments, function(key, value){
    el.append($('<p />', {"html": value.content + " by " + value.user}));
})

because of the reason I mentioned in comment.

answered May 20, 2013 at 9:41

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

Collectives™ on Stack Overflow

jQuery - Pass HTML with JS variable as parameter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related