Display message if array is empty

Question

I'm displaying favorites from localStorage on a page and I'd like to display a message for people that don't have any favorites yet. This is the div that displays the list which I'd like to repurpose to display the message below when there are no favorites:

<div id='favorites'></div>

And here is the JavaScript that normally shows the favorites:

var options = Array.apply(0, new Array(localStorage.length)).map(function (o, i){
    return localStorage.key(i);
});

function makeUL() {
    var LIs = '';
    var noFavs = 'Hmm, you must\'ve not favorited anything yet. Maybe you\'ll like <a href="#random-page" onclick="runme()" class="squiggly--url">this one</a>.';
    var len = options.length;

    if (len === 0) {
        document.getElementById('nofavorites').innerHTML = noFavs; 
    } else {
        for (i = 0; i < len; i += 1) {
            LIs += '<li>' + options[i] + '</li>';
        }
        return '<ul>' + LIs + '</ul>';
    }
}

document.getElementById('favorites').innerHTML = makeUL();

Right now it just shows undefined.

You are putting the message into 'nofavorites'. That should be 'favorites'. — Gerard
– Gerard, Commented Apr 27, 2020 at 17:41
You put the return value of your function makeUL() into the container. If no options are given, the functions does not return anything aka undefined, which is then displayed in the container. — Sirko
– Sirko, Commented Apr 27, 2020 at 17:43

hiral2 · Accepted Answer · 2020-04-27 18:00:16Z

This is in your html:

<div id='favorites'></div>
<div id='nofavorites'></div>

Your javascript:

var options = Array.apply(0, new Array(localStorage.length)).map(function (o, i){
    return localStorage.key(i);
});

function loadFavoriteHTML() {
    var favoriteHtml = '';
    var noFavs = 'Hmm, you must\'ve not favorited anything yet. Maybe you\'ll like <a href="#random-page" onclick="runme()" class="squiggly--url">this one</a>.';
    var len = options.length;

    // Clear html lists
    document.getElementById('favorites').innerHTML = ''; 
    document.getElementById('nofavorites').innerHTML = ''; 

    if (len === 0) {
        document.getElementById('nofavorites').innerHTML = noFavs; 
    } else {
        for (var i = 0; i < len; i++) {
            favoriteHtml+= '<li>' + options[i] + '</li>';
        }
        var ulHtml= '<ul>' + favoriteHtml+ '</ul>';
        document.getElementById('favorites').innerHTML = ulHtml;
    }
}

loadFavoriteHTML();

Your code is show undefine because when you dont have favorites list you dont return anything in you makeUI function, and by default the return value is undefined in a function if you dont have return.

I changed your code to set the UI in the function because you edit 2 different div. there is others way to do it. this is a one way.

William Mai · Accepted Answer · 2020-04-27 17:57:21Z

0

It's because the makeUL function doesn't return any value when there's no element in the options array.

You'll have to choose between: updating your element inside your function OR getting the value to insert inside your HTML element returned by your function. But you shouldn't do both.

You might want to change your code into something like this?

var options = Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
});

function makeUL() {
    var LIs = '';
    var noFavs = 'Hmm, you must\'ve not favorited anything yet. Maybe you\'ll like <a href="#random-page" onclick="runme()" class="squiggly--url">this one</a>.';
    var len = options.length;
    if (len === 0) {
        document.getElementById('favorites').innerHTML = noFavs; 
    } else {
        for (var i = 0; i < len; i += 1) {
            LIs += '<li>' + options[i] + '</li>';
        }
        document.getElementById('favorites').innerHTML = '<ul>' + LIs + '</ul>'; 
    }
}

makeUL();

Plus, you're targeting a nofavorites element that doesn't exist in your example.

edited Apr 27, 2020 at 17:57

answered Apr 27, 2020 at 17:52

William Mai

1045 bronze badges

1 Comment

Rob Csaszar Over a year ago

Thanks, that worked! The nofavorites was some code I tried just before posting, I seem to have forgotten to remove it.

Collectives™ on Stack Overflow

Display message if array is empty

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related