title: Get the child li value with its parent ul value in a json using jquery
body: <p>I have an unordered list and some <code>li</code> elements under the <code>ul</code>. I can not get the <code>ul</code> and <code>li</code> value as I expect. I tried several resources as below:</p>
  
  <p><a href="http://jsfiddle.net/mohammadwali/tkhb5/" rel="nofollow noreferrer">http://jsfiddle.net/mohammadwali/tkhb5/</a></p>
  
  <p><a href="https://stackoverflow.com/questions/1837383/how-do-i-convert-the-items-of-an-li-into-a-json-object-using-jquery">how-do-i-convert-the-items-of-an-li-into-a-json-object-using-jquery</a></p>
  
  <p><a href="https://stackoverflow.com/questions/3172775/jquery-tree-traversal-nested-unordered-list-elements-to-json">jquery-tree-traversal-nested-unordered-list-elements-to-json</a></p>
  
  <p>My code is here as below in the fiddle:</p>
  
  <p><a href="http://jsfiddle.net/tkhb5/261/" rel="nofollow noreferrer">My code is in this fiddle</a></p>
  
  <p>My expected output is as below:</p>
  
  <pre><code>[{
      "id": "1",
      "category": "Parking",
      "subcategory": [
          "Street Parking",
          "Bus Parking"
      ]
  }]
  </code></pre>
  
  <p>How can I achieve the JSON?</p>