создать объект JSON из HTML кода

Question

Я хочу, чтобы создать объект JSON, используя содержимое со страницы вики (link), в разделе 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 элемента, каждый из эти элементы ul сопровождаются списком li элементов, каждый из которых содержит название дочернего юнита (например, Performing arts содержит Music, Dance, ...), и если этот дочерний югу содержит другие дочерние элементы, он будет за которым следует один элемент ul, который содержит список элементов li, эти элементы содержат заголовок дочернего югу (например, 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); 

Теперь то, что вам нужно сделать, это вместо того, чтобы вернуться в текст, вы должны вернуть объект, так что вы получите свой выход.