How to check array is empty and display message in content in Ajax?

Question

What happens in the code is we are displaying an RSS feed based on a radio button click. The RSS feeds for each radio button do not always have content and I would like to have a message display upon a blank screen. Thank you!

<script type="text/javascript">
  $(document).ready(function() {

    $('input[type=radio]').click(function() {

        var id = this.id;

        if(id == 'radio-bio') { var categoryURL = '/BayAreaTech/wp-rss2.php?cat=15';}
        else if (id == 'radio-com'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=13';}
        else if (id == 'radio-eleP'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=9';}
        else if (id == 'radio-eleD'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=10';}
        else if (id == 'radio-nano'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=16';}
        else if (id == 'radio-opt'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=12';}
        else if (id == 'radio-semi'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=11';}
        else if (id == 'radio-comSoft'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=14';}
        else if (id == 'radio-techMan'){ var categoryURL = '/BayAreaTech/wp-rss2.php?cat=17';}
        else { var categoryURL = '/BayAreaTech/wp-rss2.php?cat=1';}

        $('#feedContainer').empty();
                    $.ajax({
                    type: 'GET',
                    url: categoryURL,
                    dataType: 'xml',
                    success: function (xml) {
                        var data = [];
            $(xml).find("item:lt(40)").each(function () {
                var dateText = $(this).find("Date").text().toString();
                var eventDate = moment(dateText,"YYYY-MM-DD");
                var title = $(this).find("title").text();

                var region = dateText.substr(8).toUpperCase();

                      if (region.length < 3) { region = "SF"; } 

                var description = $(this).find("description").text();
                var infoDisplay = description.substr(0, description.indexOf(",")+120) + "..."; //Parsed DATE from description

                  //var locationdisplay = description.substr(description.indexOf(",")+6,4); //Parsed the location from description
                var category = $(this).find("category").text();
                var linkUrl = $(this).find("link").text();
                var displayTitle = "<a href='" + linkUrl + "' target='_blank'>" + title + "</a>" 


                var item = {title: displayTitle, infoDecription: infoDisplay, Date: new Date(eventDate), Region: region,}
                var now = moment();
                if (item.Date >= now){ data.push(item); }



               // $('#feedContainer').append('<h3>'+displaytitle+'</h3><p>'+"Event Date: "+descriptdisplay+'</p><p>'+"Location: "+region+'</p');

            });
                 data.sort(function (a, b) {
                 a = new Date(a.Date);
                 b = new Date(b.Date);
                 return a<b ? -1 : a>b ? 1 : 0;
                 });

                 $.each(data, function (index, item) {
                 $('#feedContainer').append('<h3>' + item.title + '</h3><p>' + item.infoDecription + '</p>');
                 });
                    }
                });

      $("#fieldpanel").panel("close");
    });
 });
 </script>

Instead of giving the radio buttons different IDs, consider using different values instead. IDs are meant to be used for identifying an element, the value is the data element that the element represents. You could also use class, but value seems most appropriate. — RobG
– RobG, Commented Nov 25, 2013 at 1:39

nhydock · Accepted Answer · 2013-11-25 01:24:02Z

1

You could just check the array's length

if (data.length > 0) {
    data.sort(function (a, b) {
        a = new Date(a.Date);
        b = new Date(b.Date);
        return a<b ? -1 : a>b ? 1 : 0;
    });

    $.each(data, function (index, item) {
         $('#feedContainer').append('<h3>' + item.title + '</h3><p>' + item.infoDecription + '</p>');
    });
}
else {
    $("#feedContainer").append('<h3>There is no content to display</h3>');
}

answered Nov 25, 2013 at 1:24

nhydock

2,4261 gold badge17 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

How to check array is empty and display message in content in Ajax?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related