Using conditional statements in jquery append

Question

Total noob here, trying to conditionally append some values to an html object. This is built from sample code I found so be kind...

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        $('<div></div>')
        .append('<h1>' + this.from.name + '</h1>')
        .append('<p>' + this.story + '</p>')
        $if (typeof this.picture !== "undefined") {
            .append('<img src="' + this.picture + '">')};
        .appendTo('#facebook')
          });
     });

Come on, there is nothing like $if... Try to separate each append command and then add conditions to some of them. — roomcays
– roomcays, Commented Mar 3, 2013 at 22:58

Luigi Pulcini · Accepted Answer · 2016-09-30 20:47:27Z

jQuery's append method accepts multiple elements, including null objects like in:

$('<div>').append(
    $('<p>').text('First paragraph'),
    $('<p>').text('Second paragraph'),
    null,
    $('<p>').text('Third paragraph')
);

which is equivalent to

$('<div>').append(
    $('<p>').text('First paragraph')
).append(
    $('<p>').text('Second paragraph')
).append(
    null
).append(
    $('<p>').text('Third paragraph')
);

Please note that a null object would simply be ignored in the final DOM element.

For this reason you can adjust your code as follows:

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        $('<div></div>').append(
            $('<h1>').html(this.from.name),
            $('<p>').html(this.story),
            (this.picture) ?
                $('<img>').attr('src', this.picture) :
                null
        ).appendTo('#facebook')
    });
});

The third element appended to the div is either the img element or null depending on this.picture being defined or not.

MOnsDaR · Accepted Answer · 2013-03-03 23:02:10Z

2

You don't have to chain it all together:

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        var element = $('<div></div>');
        element.append('<h1>' + this.from.name + '</h1>');
        element.append('<p>' + this.story + '</p>');

        if (typeof this.picture !== "undefined") {
            element.append('<img src="' + this.picture + '">')
        };
        element.appendTo('#facebook');
    });
});

It also is considered good practice to build what you want to append in a string and append it AFTER the $.each

answered Mar 3, 2013 at 23:02

MOnsDaR

8,7068 gold badges56 silver badges72 bronze badges

2 Comments

user2129933 Over a year ago

Thank you very much, this worked perfectly! To tell the truth I'm not a programmer, just a designer. Thus the bad code. Time to take a class on javascript I think!

MOnsDaR Over a year ago

In this case I would totally recommend codecademy.com - I know several people who learned to code with this page. They provide courses for JavaScript as well as jQuery. Please feel free to accept the answer if it helped solving your problem.

Blender · Accepted Answer · 2013-03-03 22:59:45Z

jQuery is just a JavaScript library. You're still working with JavaScript:

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        var $div = $('<div>');

        $('<h1>', {text: this.from.name}).appendTo($div);
        $('<p>', {text: this.story}).appendTo($div);

        if (this.picture) {
            $('<img>', {src: this.picture}).appendTo($div);
        }

        $div.appendTo('#facebook');
     });
});

pdoherty926 · Accepted Answer · 2013-03-03 23:00:43Z

0

Try something like this:

$.getJSON('url to facebook json feed', function(fbresults){
    $.each(fbresults.data, function(){
        var $wrapper = $('<div></div>')
            .append('<h1>' + this.from.name + '</h1>')
            .append('<p>' + this.story + '</p>');

        if (this.picture) {
            $wrapper.append('<img src="' + this.picture + '">');
        } else {
            $wrapper.appendTo('#facebook');
        }
    });
});

answered Mar 3, 2013 at 23:00

pdoherty926

10.5k5 gold badges47 silver badges75 bronze badges

Collectives™ on Stack Overflow

Using conditional statements in jquery append

4 Answers 4

Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Related