Wie HTML-Baum in einen benutzerdefinierten JSON-Baum mit jQuery konvertieren?

Question

<ul id='parent_of_all'> 
<li> 
    <span class='operator'>&&</span> 
    <ul> 
    <li> 
     <span class='operator'>||</span> 
     <ul> 
     <li> 
      <span class='operator'>&&</span> 
      <ul> 
      <li> 
      <span class='condition'>1 == 1</span> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
    <ul> 
    <li> 
     <span class='condition'>1 != 0</span> 
    </li> 
    </ul> 
</li> 
</ul> 

zu

{"&&":[{'||':[ {'&&':[ {"lhs": "1", "comparator": "==", "rhs":"1"} ]} ] } , {"lhs": "1", "comparator": "!=", "rhs":"0"}]} 

Ab sofort weiß, dass ich die Grundlagen von jQuery, JavaScript. Ich muss wissen, wo ich anfangen soll zu denken, um die obige Umwandlung zu erreichen.

Und der HTML-Baum könnte mit mehr Kindern komplexer sein.

Answer 1

Dank @Alexandru und @Nenad für einen Start zu geben. Ich konnte das alleine fertigstellen. Unten ist die Funktion, die Json generiert.

function prepare_json(current_node){ 
    var object = {} 
    var span = $(current_node).children('span') 
    if (span.hasClass('condition')){ 
     var text = span.html().split(" "); 
     object = {lhs: text[0], comparator: text[1], rhs: text[2]} 
    } 
    else if(span.hasClass('operator')){ 
     var operator = span.text() 
     object[operator] = (object[operator] || []) 
     var children = $(current_node).children('ul').children('li') 
     for(var i = 0; i < children.length; i++){ 
      var child_pql = prepare_json([children[i]]) 
      object[operator].push(child_pql) 
     } 
    } 
    return object 
} 

Unten ist der Code, der diese Funktion aufruft:

var parent_node = $('#parent_of_all').children('li') 
var json = JSON.stringify(prepare_pql_json(parent_node), null, 2) 

Answer 2

Sie benötigen eine Möglichkeit, die erste Ebene li auszuwählen, ich nehme an, Sie haben ein Elternelement mit einer ID wie list. Ich habe den folgenden Code mit basic jquery geschrieben, damit Sie es verstehen können.

var result = {}; 

var $all_li = $('#list').children('li');  // selecting the first level of li 
for(var i in $all_li){      // iterating all_li using for (you may use forEach) 

    var $current_li = $($all_li[i]);      // getting operator from first span 
    var operator = $current_li.children('span').html();  // the text of the operator 

    var $inner_spans = $current_li.find('>ul >li >span'); // getting list of children spans (from path $list>li>ul>li>span) 
    var li_spans = [];          // an array where we will put the inner span objects 
    for(var j in $inner_spans){ // iterating the inner spans 
     var text = $($inner_spans[j]).html().split(" ");  // splitting the html 
     li_spans.push({ 
      lhs: text[0], 
      comparator: text[1], 
      rhs: text[2] 
     });        // adding the splitted html to an object. Note: error if text didn't have 2 white spaces 
    } 

    result[operator] = li_spans;   // adding the operator key and li_spans value to the result json 
} 

Dieser Code wird die HTML analysiert und konstruiert die result json, sollte es Ihnen zur Verfügung gestellten für das HTML-Format arbeiten. Beachten Sie, dass Fehler nicht behandelt werden (z. B. schlechtes Baumformat). simmiar HTML-Formate.

Answer 3

Sie können dies tun, mit each und map

var obj = {} 
 
var span = $('li > span').not('ul li span').text(); 
 

 
$('ul li span').each(function() { 
 
var text = $(this).text().split(' '); 
 
obj[span] = (obj[span]||[]).concat({lhs: text[0], comparator: text[1], rhs: text[2]}); 
 
}); 
 

 
console.log(obj)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
    <span>&&</span> 
 
    <ul> 
 
    <li> 
 
     <span>1 == 1</span> 
 
    </li> 
 
    </ul> 
 
    <ul> 
 
    <li> 
 
     <span>1 != 0</span> 
 
    </li> 
 
    </ul> 
 
</li>