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

Question

我有以下数组:

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

我需要按特定顺序在“ul”内附加免费设施:

1. 免费无线网络
2. 免费城市 map

我有以下内容:

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

但是，这只会根据它们在数组中的位置进行打印

我已经尝试过，但还没有:

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

Answer 1

如果您不知道列表中有多少个设施，您可以执行以下操作:

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

这是一个比较函数，您可以使用它对数组进行排序，以便以正确的顺序为您提供设施。相反，您可以以自然的方式指定 id，但结果列表的顺序是对未出现在列表中的 id 进行排序时有效的顺序，而无需索引为 -1 的特殊情况。

你可以做的:

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