Dynamically create and nest DIV items from a json array

Question

I'm new to Javascript so this may not be the best approach. I'm doing Bellycard's web app challenge #1 for fun.

I query their search endpoint, which returns JSON, something like this: https://rdio-service.herokuapp.com/search?q=korn (click it)

I get the unique search type:

//artist, album, tracks
var searchTypes = $.unique(data.data.map(function(d) {return d.type}));

Then I iterate searchTypes and filter the original data JSON for that searchType. I learned how to .appendChild to an existing item on the GUI just fine. But I don't know how to display the results under each searchType. Code below.

//iterate searchTypes and display them foreach searchType
for(var i = 0; i < searchTypes.length; i++)
{
    var searchType = searchTypes[i];
    var newDiv = document.createElement('div');
    newDiv.id = searchType + "Result";

    //and then, each search type should have results for their type
    //select specific type for this iteration and put it in a results array
    var resultsThisType = data.data.filter(function (f) {
        return f.type ==  searchType;
    });

    for(var j = 0; j < resultsThisType.length; j++) {
        var newP = document.createElement('p'); //put it in a 'p' item for now, for testing
        newP.id = searchType + i + j;
        newP.innerHTML = resultsThisType[i].name; //test
        document.getElementById(searchType + "Result").appendChild(newP); //error here... what's the right approach?
    }

    newDiv.className = "typeResult";
    newDiv.innerHTML = "<h2>" + searchType + "</h2>";
    document.getElementById("results").appendChild(newDiv);
}

document.getElementById(searchType + "Result") is null and no such method as .appendChild. — Kyle
– Kyle, Commented Apr 15, 2015 at 20:54

Kivak Wolf · Accepted Answer · 2015-04-15 21:06:03Z

The problem is you are trying to find the div you "created" before it was added to the DOM. In your code, you create a parent div with this:

var newDiv = document.createElement('div');
newDiv.id = searchType + "Result";

But you never add newDiv to the DOM structure on the page. Therefore, it only exists in memory until your last line here:

document.getElementById("results").appendChild(newDiv);

So when you try to find the element here:

document.getElementById(searchType + "Result").appendChild(newP);

The element can't be found and the method doesn't exist because getElementById() returns null since no element exists in the DOM with that ID.

Instead, what you need to do in this case is to use the actual parent variable like this:

newDiv.appendChild(newP);

See, document.getElementByID() only finds elements currently added to the DOM structure. It won't find anything that is in memory. That's why you need to use the actual variable you created prior. Once you add newDiv to the DOM on that last line it, and all it's children, will be added.

Another option would be to add newDiv to the DOM right after creating it and before making it's child elements. THEN and only then can you use getElementByID() and access the element.

It might be up for debate exactly which order to do it. But in some cases you might want to add the parent (newDiv) ONLY when it has children. So in that case you would want to wait to add it to the DOM until you know for sure it has children.

Collectives™ on Stack Overflow

Dynamically create and nest DIV items from a json array

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