創建HTML代碼JSON對象

Question

我想創建一個使用內容從一個wiki頁面（link）一個JSON對象，在部分Contents我想提取所有內容，創建這樣一個對象：

{ 
Arts : { 
"Performing Arts" : [{"Music" : [ 
     {"title" : "Accompanying"}, 
     {"title" : "Chamber music"}, 
     {"title" : "Church music"}, 
     {"Conducting" : [ 
      {"title" : "Choral conducting"}, 
      {"title" : "Orchestral conducting"}, 
      {"title" : "Wind ensemble conducting"} 
     ]},{....}], 
"Visual arts" : [all its sub-child] 
} 

所以我試過的是，我複製源的HTML代碼看起來像這樣（每個部分（Arts，Humanities ...），在這裏我只給了第一部分Arts的例子）：

h2這包含第一部分Arts，然後是h3元素，這些元素中的每一個都包含子子標題（Performing arts,Visual arts，...），並且這些h3元素中的每一個都跟有一個包含單個元素的div元素，每個元素這些ul元素後跟li元素的列表，這些li元素中的每一個都包含子子子標題（例如Performing arts包含Music,Dance，...），並且如果此子子子元包含其他子元素，它將後跟一個包含li元素列表的元素ul，這些元素包含子子子標題（例如Conducting含有Choral conducting，Orchestral conducting，...）等等......

所以，我想是這樣的：

var json = []; 

$("body").find('h2').each(function(){ 
    var h2 = $(this).find('span').first().text(); 
    var childs = $(this).nextAll('h3'); 
    childs.each(function(){ 
     var h3 = $(this).find('span').first().text(); 
     subChilds = $(this).next('div'); 
     subChilds.each(function(){ 
     subSubChilds = $(this).next('ul'); 
     console.log(subSubChilds); 
     }) 
     }) 
}); 

但後來我得到棧，我不知道我該怎麼繼續。

這裏是一個小提琴：https://jsfiddle.net/W4Km8/9444/（在這種提琴我只複製了前兩個部分Arts和Humanities的源代碼）

我該如何解決這個問題？

Answer 1

你有一個遞歸函數來分析它，就像這樣：

function parseRecursive(ul, result) { 
    result = result || []; 
    var childs = ul.children('li'); 
    childs.each(function() { 
    var child = $(this); 
    var title = child.find('a').eq(0).text(); 
    var r = {}; 
    var subLevel = child.find('ul'); 

    if (subLevel.length > 0) { 
     r[title] = parseRecursive(subLevel, []); 
    } else { 
     r.title = title; 
    } 

    result.push(r); 
    }); 
    return result; 
} 

這裏被更新jsfiddle。

Answer 2

，如果你看到的文檔對象jQuery中

你可以通過這個頁面的每一個元素遍歷。

到HTML頁面轉換成JSON，我建議你這樣會更容易

var jsonObjectOfDoc=jQuery.parseJSON(JSON.stringify(document)); 

現在你可以使用JSON玩。

我還沒有測試代碼，只是建議你走一條路，希望這會有所幫助。尋找更好的解決方案。

Answer 3

此答案不是您想要的確切結果。希望你能弄清楚如何改變它來得到你所需要的。只是想幫助你克服被卡住的部分。

var json = []; 

//Selecting all of the h2s seems fine 
$("body").find('h2').each(function() { 
    //persobally I would use the class, but I did not change your org code 
    var h2 = $(this).find('span').first().text(); 

    //create a new object using the text you found 
    json[h2] = {}; 

    //Now you need to select only the child h3s 
    // To do this, you need to select all of the siblings until you reach the next h2 
    // than you need to figure the h3 elements out of the set 
    var childs = $(this).nextUntil("h2").filter("h3"); 

    //loop over the h3 elements 
    childs.each(function() { 

    //grab the headlines text 
    var h3 = $(this).find(".mw-headline").text(); 

    //find the sibling div, and select all of the first anchors 
    // loop over the anchors and get the text and use map and get to output an array 
    var items = $(this) 
     .next("div").find("ul li a:first-child") 
     .map(function() { 
     return $(this).text(); 
     }).get(); 

    //add the array of items to the key in our object 
    json[h2][h3] = items; 

    }); 

}); 

//display the result of the looping 
console.log(json); 

現在，你需要做的是什麼，而不是返回文本，你需要讓你得到你的輸出返回對象。