Parsing JSON array based on value/key

Question

I'm looking to parse this JSON array and display the available locations in a structured list and am having a hard time wrapping my head around where to begin.

So the data is parsed to HTML based on the date selected, but in a side bar it needs to show the available locations based on the keys in the 'location' value - but this parsing needs to be structured in a tree like the HTML below. Is there an efficient way to accomplish this? The HTML and JSON can be tweaked slightly or have data attributes added if that helps accomplish this in a more elegant way. Thanks!

This is the sample JSON array:

[
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "New York",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "Los Angeles",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "San Francisco",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "Chicago",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "Europe",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "Asia",
    "date": "June 19, 2015"
  }
]

This is the the structure in which it should be output

<ul>
<li data-location="USA" class="collapsable">USA
    <ul class="cities">
        <li data-location="los-angeles">Los Angeles</li>
        <li data-location="new-york">New York</li>
        <li data-location="san-francisco">San Francisco</li>
        <li data-location="chicago">Chicago</li>
        <li data-location="philadelphia">Philadelphia</li>
        <li data-location="detroit">Detroit</li>
        <li data-location="atlanta">Atlanta</li>
        <li data-location="new-orleans">New Orleans</li>
        <li data-location="washington-dc">Washington D.C.</li>
    </ul>
</li>
<li data-location="europe">Europe</li>
<li data-location="asia">Asia</li>
<li data-location="south-america">South America</li>
<li data-location="africa">Africa</li>
<li data-location="australia">Australia</li>
</ul>

Answer 1

I assume you are trying to create a dynamic html using the json object. You may try the following. ( Remember the following code only provides the logic you need to implement, based on your requirement you may need to change the Json structure or jquery )

  <ul class="cities">      
    </ul>

<script>
var data = [
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "New York",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "Los Angeles",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "San Francisco",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "Chicago",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "Europe",
    "date": "June 19, 2015"
  },
  {
    "link": "http://link.com",
    "title": "Illustration ipsum dolor sit amet",
    "location": "Asia",
    "date": "June 19, 2015"
  }
];



 $().ready(function(){
var parsed = JSON.stringify(data); // get the json string 
var obj = $.parseJSON(parsed); // convert json string into json object

$.each(obj,function(i)
{
   $(".cities").append("<li data-location='" + obj[i]["location"] + "'>" + obj[i]["location"] + "</li>");
});
});
<script>

UPDATE : To avoid duplicates

var objArr = new Array;     
$.each(obj,function(i)
{
    if(objArr.indexOf(obj[i]["location"]) == -1)
    {
      objArr.push(obj[i]["location"]);     
     $(".cities").append("<li data-location='" + obj[i]["location"] + "'>" +    obj[i]["location"] + "</li>");
    }
});