how to iterate json data in html using jquery in tree view structure node
<p>I want to iterate JSON data in a tree view structure. For first level I am only able to iterate json value and for second third level failed to iterate the data next next level of data inside the parent array.</p>

<p>The way of declaring my key/value pairs in JSON may also be an issue because I am using the same '<em>title</em>' keyword.</p>

<h3>JSON</h3>

<pre><code>{  
           "category":[        
               {  
                 "title":"Customer Satisfaction", // first levl
                 "items":[  
                    {  
                       "title":"Bulletins", // second level
                       "id":"nnanet:category/customer-satisfaction/bulletins"
                    },
                    {  
                       "title":"Consumer Affairs", // second level
                       "id":"nnanet:category/customer-satisfaction/consumer-affairs"
                    },
                    {  
                       "title":"Loyalty",
                       "id":"nnanet:category/customer-satisfaction/loyalty"
                    },
                    {  
                       "title":"Reference Guide",
                       "id":"nnanet:category/customer-satisfaction/reference-guide"
                    },
                    {  
                       "title":"TOI",
                       "id":"nnanet:category/customer-satisfaction/toi"
                    }
                 ]
              },
              {  
                 "title":"Accessories",
                 "id":"nnanet:category/accessories"
              },
              {  
                 "title":"Certified Pre-Owned",
                 "id":"nnanet:category/certified-pre-owned"
              }

           ]
        }
</code></pre>

<h3>HTML</h3>

<pre><code>&lt;div id="all-id"&gt;
    &lt;ul class="tree"&gt;&lt;/ul&gt; // appending html code and json code inside this //
&lt;/div&gt;
</code></pre>

<h3>JavaScript</h3>

<pre><code>$.ajax({
    url: '../js/internal/json/documentListing.json',
    datatype: 'json',
    type: 'get',
    cache: 'false',
    success: function(data) {
        $.each(data.category, function(index, value) {
            console.log("Title :" + value.title + "," + "ID :" + value.id);
            var treeViewdata = "&lt;li&gt; &lt;a href='#'&gt;" + items.title + "&lt;/a&gt; &lt;ul&gt; &lt;li&gt; &lt;a href='#'&gt;" +
                value.title + "&lt;/a&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/li&gt;";
            $(treeViewdata).appendTo(".tree");
        });
    }
});
</code></pre>

<p><code>value.title</code> is the first level of data showing and <code>items.title</code> is the second level of data to iterate. Here I am only getting issue and the condition is failing.</p>