We Keep Coding

How to convert html tree in to a customized json tree using jquery?

<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>
to
{"&&":[{'||':[ {'&&':[ {"lhs": "1", "comparator": "==", "rhs":"1"} ]} ] } , {"lhs": "1", "comparator": "!=", "rhs":"0"}]}
As of now, I know the basics of jQuery, JavaScript. I need to know where to start thinking in order to accomplish the above conversion.
And the html tree could be more complex with more children.

You can do this with each and 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>

You will need a way to select the first level of li, I assumed you have a parent element with an id such as list. I wrote the following code using basic jquery so you can understand it.
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
}
This code will parse the html and construct the result json, it should work for the html format you provided. Keep in mind that it does not handle errors (such as bad tree format).
simmiar html formats.

Thanks #Alexandru and #Nenad for giving a start. I have been able to complete this on my own.
Below is the function that generates json.
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
}
Below is the code that calls that function:
var parent_node = $('#parent_of_all').children('li')
var json = JSON.stringify(prepare_pql_json(parent_node), null, 2)

How do I get all the LI UL elements ID value and place them in a JavaScript array?

I have to embed some tracking code on my site. So I have a list of LI elements with an ID value that I want to place inside an array of the snippet. They should be numeric like, 123, 456, etc inside an object. I want to do it in pure JavaScript.
This is my code I have tried. My HTML:
<ul id="itemGrid">
<li class="item" id="1080"> product code </li>
<li class="item" id="1487"> product code </li>
<li class="item" id="1488"> product code </li>
...
</ul>
This is the JavaScript code
// Get all LI items and get the ID of them in the object viewList
var catId = document.getElementById('itemGrid').getElementsByTagName('li');
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
// SHOULD BE LIKE THIS
// { event: "viewList", item: ["First item id", "Second item id", "Third item id"] }
// My actual code
{ event: "viewList", item: [ catId[].id ] }
);

try this
var lis = document.getElementById('itemGrid').getElementsByTagName('li');
var idArray = [];
for ( var counter = 0; counter < lis.length; counter++)
{
idArray.push( lis[ counter ].id );
}
console.log( idArray );

You can use querySelectorAll to select all the matching elements passed as selector.
The selector '#itemGrid li[id]' will select all the <li> elements inside #itemGrid element having id attribute on it.
The querySelectorAll returns a collection of HTML elements. Iterate over this collection to get the individual element id.
var lis = document.querySelectorAll('#itemGrid li[id]');
var arr = [];
for (var i = 0; i < lis.length; i++) {
arr.push(+lis[i].id);
}
console.log(arr);
document.write('<pre>' + JSON.stringify(arr, 0, 4) + '</pre>');
<ul id="itemGrid">
<li class="item" id="1080">1080</li>
<li class="item" id="1487">1487</li>
<li class="item" id="1488">1488</li>
</ul>
<hr />

You can convert your HTMLCollection to an Array by passing it through slice, and you can then map that array:
catId = Array.prototype.slice.call(catId).map(function(li) { return li.id; });
var catId = document.getElementById('itemGrid').getElementsByTagName('li');
catId = Array.prototype.slice.call(catId).map(function(li) { return li.id; });
document.write(catId);
<ul id="itemGrid">
<li class="item" id="1080"> product code </li>
<li class="item" id="1487"> product code </li>
<li class="item" id="1488"> product code </li>
</ul>

var lis = document.getElementById('itemGrid').getElementsByTagName('li');
var arr = [];
// You need to iterate the list lis
[].forEach.call( lis, function(el){
arr.push( el.id );
});
// Making the object you want
var criteo_q = { event: "viewList", item: arr };
console.log(criteo_q);
To iterate the list of DOM elements, you can also use

Parsing data to create a navigation pane

I have this XML response: http://jsfiddle.net/ZeeHv/
I'm trying to create something like this using the information from the dump:
<UL>
<li>Academic
<ul>
<li>BM</li>
<li>CMTTE</LI>
<li>DM</li>
<li>PM</li>
</ul>
</li>
</ul>
<ul>
<li>ARCHIVE</li>
</UL>
<ul>
<LI>ASSOCIATIONS
<ul>
<li>BM</li>
<li>DM</LI>
<li>PM</li>
</ul>
</LI>
</ul>
In the end the XML can give me a list of all my sites and subsits:
https://hosted.demo.ca
https://hosted.demo.ca/academic
https://hosted.demo.ca/academic/bm
https://hosted.demo.ca/academic/cmtte
https://hosted.demo.ca/academic/dm
https://hosted.demo.ca/academic/pm
https://hosted.demo.ca/archive
https://hosted.demo.ca/associations
https://hosted.demo.ca/associations/bm
https://hosted.demo.ca/associations/dm
https://hosted.demo.ca/associations/pm
How can I go through this information and append ul and li tags to create a site navigation menu?
JS used to get XML:
function getAllSites(){
$().SPServices({
operation: "GetAllSubWebCollection",
async: true,
completefunc: function(xData, Status){
$(xData.responseXML).find("Web").each(function(){
console.log($(this).attr("Url"));
});
}
});
}

A simple solution would be to build a map of indexes based on the depth of the links, the depth is determined by the number of / in the url.
var map = {}; //init the map
for (var i = 0, l = webs.length; i < l; i++) {
//we create a index for our links based on the depth of them by `/`
var m = webs[i].attributes['Url'].value.substring(23, webs[i].attributes['Url'].value.length).split('/').length;
map[m] = map[m] || []; //make sure we leave alone the old values if there is none init with new array
map[m].push(webs[i].attributes['Url'].value); //push new value to node
}
console.log(map);
console.log(map); will output an object similar to this:
{
"1": ["https://hosted.demo.ca", "https://hosted.demo.ca/academic", "https://hosted.demo.ca/archive", ...],
"2": ["https://hosted.demo.ca/academic/bm", "https://hosted.demo.ca/academic/cmtte", ...],
}
From this you can create your list of elements.

Lists alphabetical ordered by javascript with letter headings

I have a list like this:
<ul id="list">
<li>Adam</li>
<li>Alex</li>
...
<li>Zara</li>
</ul>
And it is already alphabetical ordered by this JavaScript:
var mylist = $('#list');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
Now I need to set the list like this:
<ul id="list">
<li id="a"><a name="a" class="title">A</a>
<ul>
<li>Adam</li>
<li>Alex</li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li>Barry</li>
<li>Becky</li>
</ul>
</li>
...
...
...
<li id="z"><a name="z" class="title">z</a>
<ul>
<li>zavv</li>
<li>zora</li>
</ul>
</li>
</ul>
To use the list in this Apple Style Slider.
Do you know how can I do it with JavaScript?

It would be easiest (I guess) to collect all li elements in an object first (categorized bei their content's initial letter) and then sort those lists separately. Since code says more than a thousand words, here's how I would do that:
var list = { letters: [] }; //object to collect the li elements and a list of initial letters
$("#list").children("li").each(function(){
var itmLetter = $(this).text().substring(0,1).toUpperCase();
if (!(itmLetter in list)) {
list[itmLetter] = [];
list.letters.push(itmLetter);
}
list[itmLetter].push($(this)); //add li element to the letter's array in the list object
});
list.letters.sort(); //sort all available letters to iterate over them
$.each(list.letters, function(i, letter){
list[letter].sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase()); //sort li elements of one letter
});
var ul = $("<ul/>"); //create new dom element and add li elements
$.each(list[letter], function(idx, itm){
ul.append(itm);
});
$("#list").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul)); //add the list to a new li and to #list ul
});
JSFiddle: http://jsfiddle.net/KnC6M/

Thanks #Aletheios, I updated your solution to make it more efficient solution with the use of css without removing list by $("#list").empty();
Assuming your list is already sorted.
var letters = [];
$("#list").children("li").each(function(i){
var itmLetter = $(this).text().trim().substring(0,1).toUpperCase();
if (letters.indexOf(itmLetter)<0) {
console.log(`${itmLetter} is not in ${letters} and index is ${i}`);
$(`#list li:nth-child(${i+1})`).addClass("AddContent").attr('data-content',itmLetter);
letters.push(itmLetter);
} else {
console.log(`${itmLetter} is in ${letters}`);
}
});
CSS:
#list{
margin-left: 15px;
}
li.AddContent:before {
content: attr(data-content);
margin-left: -15px;
display: block;
}
HTML:
<ul id="list">
<li> Zara</li>
<li> Adam</li>
<li> Alex</li>
<li> Toby</li>
</ul>
JSfiddle: http://jsfiddle.net/KnC6M/105/

I was searching for something similar, I wanted to sort an array in alphabetically grouped manner. Here is my code which is little modified version of #Aletheios code. Hope it helps.
var list = { letters: [] };
var words = {let: ['abc', 'aabbgg', 'cda', 'hello', 'bca']};
$.each(words.let, function(){
var itLetter = this.substring(0,1).toUpperCase();
if(!(itLetter in list)){
list[itLetter] = [];
list.letters.push(itLetter);
}
list[itLetter].push($(this));
});
list.letters.sort();
$.each(list.letters, function(i, letter){
var ul = $("<ul/>");
var li = $('<li/>');
$.each(list[letter], function(idx, itm){
ul.append('<li>'+ itm[0] +'</li>');
console.log(itm);
});
$("body").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));
});
Here is the fiddle.
http://jsfiddle.net/checkomkar/x8taqcnk/

count immediate child elements using jquery with a variable

This question is similar to this one (but not exact):
Count immediate child div elements using jQuery
I have a bunch of lists that represent christmas presents for different people.
As an example, this is a list of presents for one person. Note that new people can be added
<ul id = "presents">
<li id = "person1" >
<ul id = "presentsforperson1">
<li id = "present1" >
<ul id = "present1info">
<li> Present 1 </li>
<li> A New Pair of Shoes </li>
<li> $19.99 </li>
</ul>
</li>
<!-- More presents for person 1 can be added here dynamically-->
</ul>
</li>
<!-- More people can be added here -->
</ul>
Unlike the question posted, I have the object presentsforperson1 in a variable called drop (droppable). I was wondering what the correct syntax is for finding the number of presents person 1 has (in this case 1) with this variable?
This is what I have tried so far:
var numberofPresents = $(drop + "ul > li").length; //drop holds li#presentsforperson1 .droppable
var numberofPresents = $(dropid + "ul > li").length; //dropID is $(drop).attr("id");

If the person id is the id of the ul containing their presents then simply:
$('#personId > li').length
will do it.
Update
Or if the id is in a variable:
$('#' + personId).children('ul').length
You obviously could append the child selector to the selector string eg:
$('#' + personId + ' > ul').length
But personally I find the version with the .children call more readable.

Assuming your drop variable references a jQuery object:
var quantity = drop.children().length;
If it has the raw DOM element:
var quantity = $(drop).children().length;
If it is merely a string with the ID, with no ID selector syntax:
var quantity = $('#' + dropid).children().length;
Or you can do concatenation like you were:
var quantity = $('#' + dropid + " > li").length;

You can do something as follows (give your lis that represent a present a css class):
var presents = $('ul[id="person1"]').children('li.presentClass');
alert(presents.length);