Convert the items of an LI into a json object using jquery

by epinapala

HTML

<ul class="nav__list">
  <li data-id="apiOverviewGuidelines">
    <input hidden="" type="checkbox" id="wc1-group-0-0">
    <label for="wc1-group-0-0"><i class="icon-chevron-right"></i>API Overview &amp; Guidelines</label>
    <ul class="group-list">
      <li data-id="introduction"><a>Introduction</a></li>
      <li data-id="designSummary"><a>Design Summary</a></li>
      <li data-id="businessUseCases"><a>Business Use cases</a></li>
      <li data-id="restrictionsLimitations"><a>Restrictions &amp; limitations</a></li>
    </ul>
  </li>
  <li data-id="apiReference">
    <input checked="" hidden="" type="checkbox" id="wc1-group-1-0">
    <label for="wc1-group-1-0"><i class="icon-chevron-right"></i>API Reference</label>
    <ul class="group-list">
      <li data-id="method1"><a class="selected" href="/api-docs/sell/fulfillment/resources/undefined/methods/method1">Method 1</a></li>
      <li data-id="method2"><a href="/api-docs/sell/fulfillment/resources/undefined/methods/method2">Method 2</a></li>
      <li data-id="order">
        <input checked="" hidden="" type="checkbox" id="wc1-group-3-1">
        <label for="wc1-group-3-1"><i class="icon-chevron-right"></i>ORDER</label>
        <ul class="sub-group-list small">
          <li data-id="order-resourceOverview"><a href="/api-docs/sell/fulfillment/resources/order">Resource Overview</a></li>
          <li data-id="getOrder"><a href="/api-docs/sell/fulfillment/resources/order/methods/getOrder">Get an Order</a></li>
          <li data-id="getOrders"><a href="/api-docs/sell/fulfillment/resources/order/methods/getOrders">Get Orders</a></li>
          <li data-id="order-shipping_fulfillment">
            <input checked="" hidden="" type="checkbox" id="wc1-group-6-2">
            <label for="wc1-group-6-2"><i class="icon-chevron-right"></i>SHIPPING FULFILLMENT</label>
            <ul class="sub-sub-group-list">
              <li data-id="order-shipping_fulfillment-resourceOverview"><a...

CSS

pre {
  word-wrap: break-word;
  padding: 10px;
  margin: 10px;
  background: #eee;
  line-height: 1.7
}

JavaScript

var mylist = [];

var $li = $("ul.nav__list > li");
mylist = htmlListToJson($li);

function htmlListToJson($li) {
    var myList = [];
    $li.each(function () {

        var children = $(this).find('ul:first > li');
        var subList;
        if (children.length > 0) {
            subList = htmlListToJson(children);
        }
        myList.push({
            "id": $(this).attr("data-id"),
            "title": $(this).find("label").first().text() ? $(this).find("label").first().text() : $(this).find("a").first().text(),
            "isOpen": $(this).find("input").first().is(':checked'),
            "children": subList
        });
    });
    return myList;
}


// for result only
$("#result").html(JSON.stringify(mylist, null, 4))