Javascript - Unable to display UL, instead get [object HTMLUListElement]

Question

I asked a question a day ago about getting the length of an array that was nested inside an array that was inside an object. Now that I am able to get the correct information to console, I am getting the following in place of where the text should be:

[object HTMLUListElement]

Here is the code I am working with (please keep in mind I have been scouring the forums for answers, so there may be some code that is left over from different recommendations that is useless):

var experience = document.getElementById('experience');
var entryDescriptions = document.createElement('ul');


for (i = 0; i < resumeData.experience.length; i++) {
    var experienceEntryDiv = document.createElement('div');
    experienceEntryDiv.className = "experienceEntryDiv";
    var entryTitle = '<h1>' + resumeData.experience[i].title + '</h1>';
    var entryOrganization = '<h2>' + resumeData.experience[i].organization + '</h2>';
    var entryYears = '<h1 class="text-right"><small>' + resumeData.experience[i].startYear + ' - ' + resumeData.experience[i].endYear + '</small></h1>';

    for (j = 0; j < resumeData.experience[i].descriptions.length; j++) {
        descriptionCounts = resumeData.experience[i].descriptions.length;
        console.log(descriptionCounts);
        var entryDescItem = document.createElement('li');
        entryDescItem.className = "entryDescItem";
        var entrydesc = document.createTextNode(resumeData.experience[i].descriptions[j]);
        entryDescItem.appendChild(entrydesc);
        entryDescriptions.appendChild(entryDescItem);
    }
    var entryHTML =
        '<div class="entry">' +
        '<div class="row">' +
        '<div class="col-md-9">' + entryTitle + entryOrganization + '</div>' +
        '<div class="col-md-3">' + entryYears + '</div>' +
        '</div>' +
        '<div class="row"><ul>' + entryDescriptions + '</ul><hr /></div>' +
        '</div>' +
        '<br />';
    experienceEntryDiv.innerHTML = entryHTML;
    experience.appendChild(experienceEntryDiv);
}

Here is my data (there is more data, I am just showing an example):

var resumeData = {

    experience: [{
            title: 'Title',
            organization: 'Company Name',
            startYear: 2017,
            endYear: 2017,
            descriptions: [
                'Using code stuff',
                'Used more code stuff'
            ]
        },
        {
            title: 'Title',
            organization: 'Company Name',
            startYear: 2017,
            endYear: 2017,
            descriptions: [
                'Using code stuff',
                'Used more code stuff'
            ]
        },
        {
            title: 'Title',
            organization: 'Company Name',
            startYear: 2017,
            endYear: 2017,
            descriptions: [
                'Using code stuff',
                'Used more code stuff'
            ]
        },
        {
            title: 'Title',
            organization: 'Company Name',
            startYear: 2017,
            endYear: 2017,
            descriptions: [
                'Using code stuff',
                'Used more code stuff'
            ]
        }
    ]
}

Originally, I was trying to figure out how to get the length in the second FOR loop. That got worked out, but now when I pull up the page, I get the Title, Organization, start and end years, but for descriptions I get:

[object HTMLUListElement]

Thanks!

This simply means that you are accessing the right object, but you need to access some aspect of the object, like a property or nested element. — Scott Marcus
– Scott Marcus, Commented Jul 19, 2017 at 21:35
Can you identify in the code where that disconnect happens? I have tried scouring the forums for an answer, and I can't seem to get it to work. — aarmfield
– aarmfield, Commented Jul 19, 2017 at 21:41
entryDescriptions is a DOM element (a UL), and you are concatenating it as if it were a string to entryHTML, so it gets transformed into the string [object HTMLUListElement] — James
– James, Commented Jul 19, 2017 at 21:46
Eey, I got late, but you got your answer :) I'm very happy for you. Remember in the future do this, ask separate question for different issues ;) — developer_hatch
– developer_hatch, Commented Jul 19, 2017 at 23:29

James · Accepted Answer · 2017-07-19 21:51:03Z

2

I would recommend using either all dom node creation (like the first part of your code) or all string concatenation (like the second part).

A quick (and VERY DIRTY, imo) workaround, would be:

...<ul>'+entryDescriptions.innerHTML+'</ul>...

answered Jul 19, 2017 at 21:51

James

22.4k5 gold badges29 silver badges44 bronze badges

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

1 Comment

aarmfield Over a year ago

This did exactly what I needed, but now the descriptions are being appended and not wiped on the new run of the loop. I appreciate the "dirty" method of getting it to work.

Bricky · Accepted Answer · 2017-07-19 21:48:50Z

1

You're concatenating (adding) a string with a DOM Object.

var entryHTML =
        '<div class="entry">' +
        '<div class="row">' +
        '<div class="col-md-9">' + entryTitle + entryOrganization + '</div>' +
        '<div class="col-md-3">' + entryYears + '</div>' +
        '</div>' +
        '<div class="row"><ul>' + entryDescriptions + '</ul><hr /></div>' + //<--HERE
        '</div>' +
        '<br />';

You can either pull the text out of the object using Javascript, or update the page with entryHTML, then use Javascript to append the object entryDescriptions

answered Jul 19, 2017 at 21:48

Bricky

2,27417 silver badges34 bronze badges

1 Comment

aarmfield Over a year ago

Can you show me what that would look like? I am appending the <ul> and </ul> because I wasn't sure how else to get entryDescriptions into a <ul> format.

Collectives™ on Stack Overflow

Javascript - Unable to display UL, instead get [object HTMLUListElement]

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related