對象數組返回對應特定的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. 免費WIFI
2. 免費的城市地圖

我有以下幾點：

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

如果可以重新組織你的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); 

---

既然你不能編輯，我們需要啓動這個JSON：

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

你可以這樣做：

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

---

另一種不可能性的方法，由於array order is preserved您可以依賴facil的順序伊蒂埃斯子陣列和做到這一點：

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

Answer 2

如果你不知道有多少設施，還有將要在列表中，你能不能做這樣的事情：

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，但是resuilting列表的順序在排序列表中沒有出現在列表中的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>"); 
});