NestedList2JSON

by michaelschmid

HTML

<ul id="tasks">
    <li>
      Task1
      <ul>
        <li>Task2</li>
      </ul>
    </li>
    <li>Task3</li>
    <li>Task4</li>
</ul>

<div id="json"> 
</div>

JavaScript

function getLi(elem) {
		return [].map.call(elem.querySelectorAll("li"), function(o) {
			// recursive call
      // var subs = getLi(o.querySelectorAll(":scope > li"));
      
			var li = { "Name" : o.textContent.replace(/\s/g, ""),
								"Tasks": getLi(o)
							};
			return li;
		});
};

document.querySelector('#json').textContent = JSON.stringify(getLi(document.querySelector('#tasks')));