Question

我正在寻找解析这个JSON数组并在结构化列表中显示可用位置，并且很难将我的头部环绕在哪里开始。

因此，根据所选日期将数据解析为HTML，但在侧栏中，它需要根据“location”值中的键显示可用位置 - 但此解析需要在树中进行结构化下面的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>");
    }
});

根据值/键

1 个答案: