title: Using JQuery to dynamically write an accordion-menu with JSON.NET
body: <p>I have written an accordion menu in HTML/jQuery. I use JSON to load the information into the accordion dynamically. The problem is that my original JSON was written in a specific format - a format which I understood and knew how to access through jQuery.</p>
  
  <p>I started to use JSON.NET to serialize my data into a JSON object (easy and effective). To give you an example:</p>
  
  <p>Previous JSON-format (this was hardcoded):</p>
  
  <pre><code>{
      "Country": [
          {
              "CountryName": "exampleCountry",
              "Region": [
                  {
                      "RegionName": "exampleRegion",
                      "SubRegion": [
                          {
                              "SubRegionName": "exampleSubRegion"
                          }
                      ]
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>JSON.NET output format (retrieved from a database):</p>
  
  <pre><code>[
    {
      "Country": "exampleCountry",
      "Region": "exampleRegion",
      "SubRegion": "exampleRegion"
    }
  ]
  </code></pre>
  
  <p>My accordion is supposed to look like:</p>
  
  <pre><code>---Country---
      ---exampleCountry1---
          ---exampleRegion1---
          ---exampleRegion2---
          ---exampleRegion3---
              ---exampleSubRegion1---
              ---exampleSubRegion2---
              ---exampleSubRegion3---
      ---exampleCountry2---
      ---exampleCountry3---
  </code></pre>
  
  <p>This is the jQuery I used to return the values from my original JSON file:</p>
  
  <pre><code>$.getJSON('example.json', function (cwData) {
      $.each(cwData.Country, function (i, country) { // loop through all the countries
          var countries = '&lt;li class="country_name"&gt;&lt;a href="#"&gt;' + country.CountryName + '&lt;/a&gt;&lt;/li&gt;'; // the name of the country
          var country_region = '&lt;ul class="country_region"&gt;'; // create a list of all the regions in the country
  
          $.each(Country.Region, function (i, region) { // loop through all the regions
              country_region += '&lt;li class="region_name"&gt;&lt;a href="#"&gt;' + region.RegionName + '&lt;/a&gt;&lt;/li&gt;'; // the name of the region
              var region_subregion = '&lt;ul class="region_subregion"&gt;'; // create a list of all the subregions in the region
  
              $.each(Region.SubRegion, function (i, subregion) { // loop through all the regions
                  region_subregion += '&lt;li class="subregion_name"&gt;&lt;a href="#"&gt;' + subregion.SubRegionName + '&lt;/a&gt;&lt;/li&gt;'; // the name of the subregion
              });
              region_subregion += '&lt;/u&gt;'; //close the list tags
              $(region_subregion).appendTo(country_region); // append the subregion to the region
          });
          country_region += '&lt;/ul&gt;'; //close the list tags
          $(countries).appendTo('#accordion_menu').append(country_region); // append the region to the country and append the country to the accorion menu
      });
  });
  </code></pre>
  
  <p>I have added as much comments as possible to make the content more readable/understandable.
  As you may have noticed - the previous JSON had more of an "hierarchy"-structure as opposed to the new JSON which has more of a "flat"-structure.</p>
  
  <p>Would it be possible to <strong>access and manipulate</strong> the JSON.NET using jQuery to build the accordion dynamically? And if so, how would I do that? Could the solution be to change the way I store my data into the serialized object?</p>