Javascript how to get the length of an Array that is nested inside an Array, that is inside an Object?

Question

I am trying to get the length of an array that is inside an array, that is inside an object.

Here is the code I am working with:

var experience = document.getElementById('experience');

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.descriptions.length; j++){
        var entryDescription = '<li>'+resumeData.experience[i].descriptions[j]+'</li>';
        entryDescriptions.appendChild(entryDescription);
    }
    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">'+entryDescriptions+'<hr /></div>'+
        '<hr /></div>'+
        '<br />';
    experienceEntryDiv.innerHTML = entryHTML;
    experience.appendChild(experienceEntryDiv);
    }

This is what my data looks like:

    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'
        ]
    },
    {
        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'
        ]
    }
],

I can target the array called "experience" with

resumeData.experience.length

However, when I try to target the "descriptions" array within the "experience" array with:

resumeData.experience.descriptions.length

the entire section disappears.

I tried using:

resumeData.experience[4].length

and that doesn't work.

Any help would be really appreciated!

Thanks!

** EDIT #2 **

After the recommendation, I adjusted the code to be as follows, but I only see

[object HTMLUListElement]

in place of the UL text that should be there. Here is what the code looks like now:

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

`resumeData.experience[0].descriptions.length` - experience is an array, so you need to select an element first. — evolutionxbox, Jul 19 '17 at 10:03
`resumeData.experience[your index here].descriptions.length` — Laazo, Jul 19 '17 at 10:04
This did not work. None of the entries show up after adding this. — aarmfield, Jul 19 '17 at 10:16

developer_hatch · Accepted Answer · 2017-07-19T11:57:14.930

1

you were close, after get one element by index, you call the property by name, then ask the size:

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++) {

        var entryDescription = '<li>' + resumeData.experience[i].descriptions[j] + '</li>';
        entryDescriptions.appendChild(entryDescription);
    }
}

edited Jul 19 '17 at 11:57

answered Jul 19 '17 at 10:05

developer_hatch

15,898
3
42
75

This did not work. After trying this, all variables disappear from the page. Here is what the code looks like after your recommendation: `var experience = document.getElementById('experience');` `for (j = 0; j < resumeData.experience[4].descriptions.length; j++){` `'
'+resumeData.experience[i].descriptions[j]+'

aarmfield

Jul 19 '17 at 10:13

@aarmfield I take a better look at my answer, and I edited it, take a look and let me know if that work – developer_hatch Jul 19 '17 at 11:57

thanks for the clarification. I got this to work for the count using what you recommended (console prints correct number of entries) however, the descriptions are not showing up. I have updated my edit to have what I have found to be as close as I can get, but I only see `[object HTMLUListElement]` where the UL should be. – aarmfield Jul 19 '17 at 14:39

@aarmfield you almost got it, you have to only use the function `appendChild` correctly, please see this link https://stackoverflow.com/questions/38240544/display-content-of-object-htmlulistelement-using-javascript , your original question was answered. Now your new question is a little more tricky and I would need another kind of info, and it's al mixed, I think the best here is ask a new question, with the new issues. I'm glad to help :) – developer_hatch Jul 19 '17 at 15:02

@aarmfield I mean, you have the data now correctly stored, you only need to display it well ;). Don't forget vote and accept the answer, I hope I can help with the new question! – developer_hatch Jul 19 '17 at 15:04

I will ask a new question. Thanks! – aarmfield Jul 19 '17 at 21:21

I have asked another question, here is the new question: https://stackoverflow.com/questions/45201377/javascript-unable-to-display-ul-instead-get-object-htmlulistelement – aarmfield Jul 19 '17 at 21:32

score 0 · Answer 2 · answered Jul 19 '17 at 12:11

i think you forgot to close the resumeData object with }

console.log(resumeData.experience[0].descriptions.length); //print 2

your code should be like :

    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'
        ]
    },
    {
        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'
        ]
    }
]}

Sorry, there is more to the data code than what I copy/pasted, so it is ended correctly, just much further down. Thanks for the heads up, though. I double checked it. — aarmfield, Jul 19 '17 at 14:36

Javascript how to get the length of an Array that is nested inside an Array, that is inside an Object?

2 Answers2