使用对象数组动态创建分组列表

rj91 发表于 Dev

rj91

我有一个嵌套的对象数组，如下所示：

result = [
           [{"country":"France","continent":"Europe","name":"street a"}],
           [{"country":"Brazil","continent":"South America", "name":"street b"},{"country":"Brazil","continent":"South America", "name":"street c"}],
           [{"country":"Germany","continent":"Europe","name":"street d"}]
         ]

请注意，这是在使用大陆和国家/地区键排序后从一组对象生成的。

我想动态生成一个列表，如下所示（大陆，然后是国家），并将其添加到中div：

欧洲
- 法国
  - 一条街
- 德国
  - 街道d
南美洲
- 巴西
  - b街
  - C街

每次返回的国家和大陆将有所不同，但结果数组将按大陆，国家顺序分组。

由于我不熟悉HTML，CSS和JavaScript，因此无法弄清楚如何动态创建此列表。到目前为止，我已经设法使用以下方法生成了一个仅包含各大洲的唯一列表：

for(var i=0;i<result.length;i++){
    if($('#continent-list li').filter(function(){
         return $(this).text() == result[i][0].continent;
    }).length == 0){
         $('#continent-list').append('<li>'+result[i][0].continent+'<ul></ul></li>');
}

即，我遍历该列表，只想看看第一个元素[result [i] [0]）并将其添加到一个名为“ continent-list”的无序列表中。每次我还检查无序列表中是否已经存在该名称，如果不存在，则仅添加。

逝去的

我认为这样做的一种方法是循环遍历数组中的对象并为可用的洲创建div，同时确保不超过一次创建任何洲，然后仍然使用相同的循环，您可以使用类似

for(i=0;i<=results.length;i++){
  if (result[i].continent == continent) //here talking about the present continent in the main loop{
     //code to create new div for the current country....then same procedure for the street part....
    }
}

抱歉，我听起来不太jqueryish：D，但实际上我希望您能得到范围

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。