基于值/键解析 JSON 数组

Question

我正在寻找解析这个 JSON 数组并在结构化列表中显示可用位置，但我很难弄清楚从哪里开始。

因此，数据会根据所选日期解析为 HTML，但在侧栏中，它需要根据“位置”值中的键显示可用位置 - 但此解析需要在树中构建，例如下面的 HTML。有没有一种有效的方法来实现这一点？如果这有助于以更优雅的方式完成此任务，则可以稍微调整 HTML 和 JSON 或添加数据属性。谢谢！

这是示例 JSON 数组：

[
  {
    "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"
  }
]

这是应该输出的结构

<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

我假设您正在尝试使用 json 对象创建动态 html。您可以尝试以下方法。 （记住下面的代码只提供了你需要实现的逻辑，根据你的需求你可能需要改变Json结构或者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>

更新：避免重复

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>");
    }
});