如何生成的JavaScript/jQuery的嵌套列表嵌套的JSON對象

Question

我想生成以下對象：

var ideaBoard = { 
    "Staff Retreat" : { 
     "Games" : [ 
      {"title" : "Rockband", "details" : "1hr"}, 
      {"title" : "Texas Hold em", "details" : "30min"} 
     ], 
     "Talks" : [ 
      {"title" : "The Old You", "details" : "Dr. Smith"} 
     ] 
    } 
} 

從以下HTML：

<div id="data"> 
    <ul><span class="board-title">Staff Retreat</span> 
     <li><span class="category-title">Games</span> 
      <ul> 
       <li> 
        <span class="title">Rockband</span> 
        <span class="details">1hr</span> 
       </li> 
       <li> 
        <span class="title">Texas Hold em</span> 
        <span class="details">30min</span> 
       </li> 
      </ul> 
     </li> 
     <li><span class="category-title">Talks</span> 
      <ul> 
       <li> 
        <span class="title">The Old You</span> 
        <span class="details">Dr. Smith</span> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

我是新來的循環/ arrays/objects - 所以我非常感謝幫助！

我在這個項目的其他地方使用jQuery，如果有幫助。

謝謝！

Answer 1

一個有多種方式。這裏是一個：

var ideaBoard = {} 
$('#data > ul').each(function() { 
    var data = {}, // board data 
     title = $(this).find('.board-title').text(); // board title 

    // find categories 
    $(this).find('> li > .category-title').each(function() { 
     var category = $(this).text(), // category title 

     // we can use map to create the array 
     var category_data = $(this).next().children('li').map(function() { 
      var tdata = {}; 

      // each span contains detailed data 
      $(this).children('span').each(function() { 
       tdata[this.className] = $(this).text(); 
      }); 

      return tdata; 
     }).get(); 

     data[category] = category_data; 
    }); 

    ideaBoard[title] = data; 
}); 

DEMO

這如果你改變了HTML的結構將最有可能突破。如果你有很多這樣的數據，這段代碼可能也很慢。

要了解所使用的方法，請看jQuery documentation。

Answer 2

它不優化，但它的工作原理：

var result = {}; 
var node1; 
var node2; 
var node3; 
var tmpObj = {}; 
$('#data > ul').each(function() { 
    node1 = $(this); 
    result[node1.find('.board-title').text()] = {}; 
    node1.find('.category-title').each(function() { 
     node2 = $(this); 
     result[node1.find('.board-title').text()][node2.text()] = []; 
     node2.next('ul').children('li').each(function() { 
      node3 = $(this); 
      tmpObj = {}; 
      node3.children('span').each(function() { 
       tmpObj[$(this).attr('class')] = $(this).text(); 
      }); 
      result[node1.find('.board-title').text()][node2.text()].push(tmpObj); 
     }) 
    }); 
}); 
console.log(result); 

Answer 3

如何生成HTML？如果您使用PHP，您可以將變量傳遞給JS，而不是稍後從HTML中讀取它們。例如，如果你有他們在數組中，可以在PHP中使用json_encode，然後在你的頁面裏回顯變量= jQuery.parseJSON（這裏）;

現在如果你不能做到這一點，你真的想從HTML中讀取它，你應該首先選擇帶有$（'＃data'）的id數據並帶上它的子節點（）。然後爲孩子們使用.each（）。然後把這個孩子對象，然後用.each（）檢查它的每個children（）並將它們添加到你的對象中。如果你可能不止這些級別，我建議爲此做一個遞歸函數。 PS：我不認爲其正確的HTML將跨度放在UL和LI之間。