Comment générer objet JSON imbriqué de la liste imbriquée avec javascript/jquery

Question

Je voudrais générer l'objet suivant:

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

du HTML suivant:

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

Je suis nouveau aux boucles/tableaux/objets - donc j'apprécie vraiment l'aide! J'utilise jQuery ailleurs dans ce projet, si cela peut aider.

Merci!

Answer 1

Il a plusieurs façons. Voici un:

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

Ce briserai le plus probable si vous modifiez la structure du code HTML. Si vous avez beaucoup de données comme celles-ci, ce code peut également être assez lent. Pour en savoir plus sur les méthodes utilisées, consultez le jQuery documentation.

Answer 2

Il n'est pas optimisé, mais il fonctionne:

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

Comment générez-vous le code HTML? Si vous utilisez PHP, vous pouvez simplement passer les variables à JS plutôt que d'essayer de les lire plus tard à partir du HTML. Par exemple, si vous les avez dans un tableau, vous pouvez utiliser json_encode en PHP et ensuite en écho dans votre page à l'intérieur des variables = jQuery.parseJSON (ici);

Maintenant, si vous ne pouvez pas le faire, et que vous voulez vraiment le lire à partir du HTML, vous devez d'abord sélectionner l'ID avec $ ('# data') et prendre ses enfants(). Ensuite, utilisez .each() pour les enfants. Ensuite, placez l'enfant à l'objet, puis vérifiez ses chaque enfants() avec .each() et ajoutez-les à votre objet. Si vous avez plus que ces niveaux, je vous recommande de faire une fonction récursive pour cela. PS: Je ne pense pas que son propre HTML pour mettre SPAN entre UL et LI.