動態創建和嵌套從JSON數組的DIV項目

我是JavaScript新手，所以這可能不是最好的方法。我正在做Bellycard's web app challenge #1的樂趣。動態創建和嵌套從JSON數組的DIV項目

我查詢自己的搜索終點，返回JSON，像這樣：https://rdio-service.herokuapp.com/search?q=korn（點擊）

我得到的唯一的搜索類型：

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

然後我迭代searchTypes和過濾原始data JSON爲即searchType。我學會了如何將.appendChild添加到GUI上的現有項目中。但我不知道如何顯示每個searchType下的結果。下面的代碼。

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

來源

2015-04-15 Kyle

明白了，輸入答案... –

'document.getElementById（searchType +「Result」）'爲空，沒有.appendChild這樣的方法。 – Kyle

你可以在jsfiddle中設置它嗎？ – shaN

問題是你正試圖找到你「創建」的div之前，它被添加到DOM。在您的代碼，您可以創建一個父div使用該：

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

但是你從不添加newDiv到DOM結構在頁面上。因此，它只存在於內存中，直到你的最後一行在這裏：

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

所以，當你試圖找到這裏的元素：

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

元素不能被發現和方法不因爲getElementById()返回null，因爲DOM中不存在具有該ID的元素。

相反，你需要在這種情況下，做的是使用實際父變量是這樣的：

newDiv.appendChild(newP);

見，document.getElementByID()只發現目前添加到DOM結構元素。它不會在內存中找到任何內容。這就是爲什麼你需要使用你之前創建的實際變量。一旦你在最後一行添加了newDiv到DOM，它將會被添加。

另一種選擇是在創建子元素之前將newDiv添加到DOM中。然後纔可以使用getElementByID()並訪問該元素。

這可能是爭論到底是哪個訂單來做到這一點。但是在某些情況下，您可能只在有子女時才添加父母（newDiv）。所以在這種情況下，您需要等待將其添加到DOM，直到您確定它有孩子。

來源

2015-04-15 20:57:44

動態創建和嵌套從JSON數組的DIV項目

回答

相關問題