‘object HTMLUListElement’ get printed alongside the content im trying to generate on my webpage

this is my html

<ul class="list-group mt-sm-3" id="listaLibri" style="overflow-y: scroll; height: auto; max-height:800px">

</ul>

this is my Js

        reqI.done(function(rsp)
        {
            rspS = JSON.parse(rsp)
            rspA = Object.values(rspS)
            var length = rspA.length;
            for (let i = 0; i < length; i++) 
            {
                if (rspA[i].hasOwnProperty('volumeInfo')) 
                {
                    if (rspA[i]['volumeInfo'].hasOwnProperty('title')) 
                    {
                        var title = rspA[i]['volumeInfo']['title'];
                    }
                    else
                    {
                        var title = "nessun titolo"
                    }

                    var isbn10 = 'ND';
                    var isbn13 = 'ND';
                    if (rspA[i]['volumeInfo'].hasOwnProperty('industryIdentifiers'))
                    {
                        for (let j = 0; j < rspA[i]['volumeInfo']['industryIdentifiers'].length; j++) 
                        {
                            if(rspA[i]['volumeInfo']['industryIdentifiers'][j].hasOwnProperty('identifier'))
                            {
                                if(rspA[i]['volumeInfo']['industryIdentifiers'][j]['type'] == 'ISBN_10')
                                    isbn10 = rspA[i]['volumeInfo']['industryIdentifiers'][j]['identifier'];
                                else if (rspA[i]['volumeInfo']['industryIdentifiers'][j]['type'] == 'ISBN_13')
                                    isbn13 = rspA[i]['volumeInfo']['industryIdentifiers'][j]['identifier'];
                            }
                        }
                    }

                    if (rspA[i]['volumeInfo'].hasOwnProperty('imageLinks'))
                    {
                        var img = rspA[i]['volumeInfo']['imageLinks']["smallThumbnail"];
                    }
                    else
                    {
                        var img = "./propic/default.png"
                    }

                    listaLibri += '<li class="list-group-item">' 
                                + '<div class="float-left mr-sm-2"><img src="'+ img +'" class="img-thumbnail" style="width: auto; height: auto; max-width: 70px; min-width: 70px; max-height: 100px; min-height: 100px;"></div>'
                                + '<span class = "lead">' + title + '</span><br>'
                                + '<span class = "lead text-muted">ISBN10: ' + isbn10 + '</span><br>'     
                                + '<span class = "lead text-muted">ISBN13: ' + isbn13 + '</span>'  
                                + '<span class = "float-right"><button class = "btn btn-success text-white"><i class="fa fa-plus" aria-hidden="true"></i></button></span>'
                                + '</li>';       
                }
                $('#listaLibri').html(listaLibri);  
            }
        });
    });      
  
$('#listaLibri').html(listaLibri); 

and when i try to load the content i generate (all the vars are generated before from an ajax request) i always get “[object HTMLUListElement]” and then the contents, so it works but obv i can’t leave that “[object HTMLUListElement]” wrote on the page, any idea in how to remove it?photo

Answer

[object HTMLUListElement] will be presented when you try to “toString()” a ul DOM object.

Objects are coerced to strings when concatenated with other strings.


In this case listaLibriContent is being used as a global variable and is set prior to the code in question.

You could

  • reset it before use listaLibriContent = "" (outside the for loop)
  • set it rather than append: change += to =
  • declare the variable as required var listaLibriContent; (inside the for loop) to supersed the global variable

You should always declare variables as you need them, in the inner-most scope that it’s needed. (javascript has traditionally messed with this as var is defined at the function level, regardless of whether it appears in an inner scope).

There may also need to be other changes, in this case:

for (..) {
    if (..) {
        let listaLibriContent = "..."
        $('#listaLibri').append(listaLibri);  
    }
}

or

let listaLibriContent = "";
for (..) {
    if (..) {
        listaLibriContent += "...";
    }
}
$('#listaLibri').html(listaLibri);  

In the second case, the html is all built first and then appended in a single step. Changing DOM elements can be time-expensive – when there’s a lot of HTML to update, it’s generally quicker to have a single .append / .html (especially when <table>s are involved (not the case here)). If there’s a handful, there’s no difference, so stick with cleanest (probably first case above).

Leave a Reply

Your email address will not be published. Required fields are marked *