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

我想生成以下對象：如何生成的JavaScript/jQuery的嵌套列表嵌套的JSON對象

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，如果有幫助。

謝謝！

來源

2011-07-06 Josiah

這不是JSON。它只是一個JavaScript對象。 –

我沒有看到你的HTML中的規則模式。您將不得不手動執行此操作 – Ibu

此html駐留在哪裏？我認爲也許你正在努力完成的是一個不同的解決方案。我可能會使用XLST，因爲這就是我所知道的，但很難從你的文本中找出你想要的。 – elgrego

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

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。

來源

2011-07-06 06:59:02

這樣做的竅門！非常感謝！ – Josiah

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

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

來源

2011-07-06 06:57:46 pltvs

感謝您的幫助！ – Josiah

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

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

來源

2011-07-06 07:25:47 Pehmolelu

關於'ul'中的'span'好點... –

感謝您的回覆！這個HTML從一個從localStorage中的JSON中解析出來的var填充 - 這很容易。我試圖弄清楚如何保存對對象所做的更改，然後使用JSON.stringify將其保存回localStorage。關於'span'和'ul'：是的！這是爲了簡化我的問題:)。再次感謝！ – Josiah

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

回答

相關問題