CODEWITHSUNDEEP
jqueryjson
user2129933
user2129933

Reputation: 33

Using conditional statements in jquery append

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')
          });
     });

Upvotes: 2

Views: 6263

Answers (4)

Luigi Pulcini
Luigi Pulcini

Reputation: 31

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.

Upvotes: 3

MOnsDaR
MOnsDaR

Reputation: 8664

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

Upvotes: 2

pdoherty926
pdoherty926

Reputation: 10359

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');
        }
    });
});

Upvotes: 0

Blender
Blender

Reputation: 298206

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');
     });
});

Upvotes: 1

Related Questions