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，{{ 1}}，...）并且每个Visual arts元素后跟一个h3元素，其中包含一个div元素，每个ul元素都被跟踪通过ul元素列表，每个li元素都包含子子项的标题（例如li包含Performing arts，Music ,. ..），如果这个子子子包含其他子节点，则后跟一个Dance元素，其中包含ul元素列表，这些元素包含子子子节点的标题（例如li包含Conducting，Choral conducting，...）等等......

所以我尝试过这样的事情：

Orchestral conducting

然后我得到了堆叠，我不知道我是如何继续的。

这是一个小提琴：https://jsfiddle.net/W4Km8/9444/（在这个小提琴中我只复制了前两个部分的源代码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); }) }) });和Arts）

我该如何解决这个问题？

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

现在您需要做的不是返回文本，而是需要返回对象以获得输出。

从html代码创建一个json对象

3 个答案: