对象数组返回与特定ID关联的标签

I have the following array:

我有以下数组:

"facilities":[
  {
    "name": "Gratis",
    "id": "FACILITYCATEGORYFREE",
    "facilities":[
       {"name": "Free city maps", "id": "FREECITYMAPS"},
       {"name": "Free parking", "id": "FREEPARKING"},
       {"name": "Free Wifi", "id": "FREEWIFI"}
    ]
  }
]

I need to append the free facilities inside a "ul" in a specific order:

我需要按照特定的顺序将免费设施附加到“ul”中:

1. Free wifi
2. Free city maps

免费城市地图

I have the following:

我有以下内容:

for (i =0; i < json.facilities[0].facilities.length; i++) {
  $("#facilities").append("<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name + "</span></li>");
}  

however this will only print based on how they are positioned in the array

但是这只会根据它们在阵列中的位置进行打印

I have tried this but not there yet:

我试过这个但是还没有:

for (i =0; i < json.facilities[0].facilities.length; i++) {
  if(json.facilities[0].facilities[i].name.length && json.facilities[0].facilities[i].id === 'FREEWIFI'){
    $("#facilities").append("<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name + "</span></li>");
  }
  if (json.facilities[0].facilities[i].id === 'BREAKFASTINCLUDED') {
    $("#facilities").append("<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name + "</span></li>");
  }
  if (json.facilities[0].facilities[i].id === 'FREEINTERNETACCESS') {
    $("#facilities").append("<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name + "</span></li>");
  }
  if (json.facilities[0].facilities[i].id === 'TOWELSINCLUDED') {
    $("#facilities").append("<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name + "</span></li>");
  }
  if (json.facilities[0].facilities[i].id === 'LINENINCLUDED') {
    $("#facilities").append("<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name + "</span></li>");
  }
  if (json.facilities[0].facilities[i].id === 'FREECITYMAPS') {
    $("#facilities").append("<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name + "</span></li>");
  }
  if (json.facilities[0].facilities[i].id === 'FREEPARKING') {
    $("#facilities").append("<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name + "</span></li>");
  }
} 

2 个解决方案

#1

If you can re-organise your JSON in a different way you could do something like;

如果你可以用不同的方式重新组织你的JSON,你可以做类似的事情;

"facilities":[
  {
    "name": "Gratis",
    "id": "FACILITYCATEGORYFREE",
    "facilities":{
       "FREECITYMAPS":{"name": "Free city maps"},
       "FREEPARKING":{"name": "Free parking"},
       "FREEWIKI":{"name": "Free Wifi"}
    }
  },
]

var firstLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities.FREEWIFI +"</span></li>"
var secondLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities.FREECITYMAPS +"</span></li>"
var thirdLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities.FREEPARKING +"</span></li>"

$("#facilities").append(firstLi + secondLi + thirdLi);

---

Since you can't edit the JSON we need to start with this:

由于您无法编辑JSON,我们需要从这开始:

"facilities":[
  {
    "name": "Gratis",
    "id": "FACILITYCATEGORYFREE",
    "facilities":[
       {"name": "Free city maps", "id": "FREECITYMAPS"},
       {"name": "Free parking", "id": "FREEPARKING"},
       {"name": "Free Wifi", "id": "FREEWIFI"}
    ]
  },
]

you could do:

你可以这样做:

var firstLi, secondLi, thirdLi = ""

for (var i = 0; i < json.facilities[0].facilities.length; i++){

  if (json.facilities[0].facilities[i].id === "FREEWIFI"){

    firstLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name +"</span></li>"

  }else if (json.facilities[0].facilities[i].id === "FREECITYMAPS"){

    var secondLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name +"</span></li>"

  }else if (json.facilities[0].facilities[i].id === "FREEPARKING"){

    var thirdLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities[i].name +"</span></li>"

  }
}

$("#facilities").append(firstLi + secondLi + thirdLi);

---

Another possibile way, since array order is preserved you can rely on the order of the facilities sub array and do this:

另一种可能的方式,因为保留了数组顺序,你可以依赖于设施子数组的顺序并执行以下操作:

if (json.facilities[0].facilities.length === 3){
  var firstLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities[2].name +"</span></li>"
  var secondLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities[0].name +"</span></li>"
  var thirdLi = "<li class='fa fa-check'><span>" + json.facilities[0].facilities[1].name +"</span></li>"
  $("#facilities").append(firstLi + secondLi + thirdLi)
}

#2

If you don't know how many facilities there are going to be in the list, you could you do something like this:

如果您不知道列表中有多少设施,您可以这样做:

id_order = ["FREEWIFI", "FREECITYMAPS"].reverse();
facility_cmp = function (a, b) {
    var a_idx = id_order.indexOf(a.id);
    var b_idx = id_order.indexOf(b.id);
    if (a_idx == b_idx) return 0;
    return (a_idx > b_idx) ? -1 : 1;
}

This is a comparison function that you can use to sort the array to give you facilities in the right order. The reverse is so that you can specify the ids in a natural way, but the resuilting list is in the order that works when sorting ids that don't appear in the list without having to have a special case for an index of -1.

这是一个比较函数,您可以使用它来对数组进行排序,以便按正确的顺序为您提供设施。反之亦然,您可以以自然的方式指定ID,但是重新排序列表的顺序是在排序未出现在列表中的ID时有效,而不必具有索引为-1的特殊情况。

The you can do:

你可以这样做:

var these_facilities = json.facilities[0].facilities
    .slice(0)               // get a copy of the array
    .sort(facilities_cmp);  // and sort it
these_facilities.forEach(function (facility) {  // forEach is easier IMHO than writing a for loop over .length
    $("#facilities").append("<li class='fa fa-check'><span>" + facility.name + "</span></li>");
});