無法從嵌套json生成下拉菜單並對其進行過濾

正在嘗試按照以下代碼填充json中的下拉菜單並對其進行過濾。我可以實現直接字段，但無法獲取嵌套字段的下拉列表。一旦兩個下拉列表填充，我想過濾它們以查看每個組合的pid列表。無法從嵌套json生成下拉菜單並對其進行過濾

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
</head> 
<body> 
Location: <select id="Location" name="Location"></select> 
Category: <select id="Category" name="Category"></select> 

<button onclick="javascript:getcount()">Search</button> 
<div id="result" style="color:#0094ff;font-size:20px;margin-top:100px;"> 
    Number of Users found : <div id="res"></div> 
</div> 
<div id="detailedresult" style="color:#0094ff;font-size:20px;margin-top:100px;"> 
    PID's : <div id="pidRes"></div> 
</div> 

<script type="text/javascript"> 
    var jsonList = { 
     "Users": [{ "pid": "2", "loc": "Bangalore", "cat": [{ "dname": "Hotels" }, { "dname":"Travel" }, { "dname":"Banking" }] }, 
      { "pid": "3", "loc": "Chennai", "cat": [{ "dname":"Hotels" }, { "dname":"Travel" }, { "dname":"Banking" }] }, 
      { "pid": "4", "loc": "Delhi", "cat": [{ "dname":"Hotels" }, { "dname":"Travel" }, { "dname":"Healthcare" }] }, 
      { "pid": "5", "loc": "Hyderabad", "cat": [{ "dname":"Retail" }, { "dname":"Insurance" }, { "dname":"Banking" }] }, 
      { "pid": "6", "loc": "Hyderabad", "cat": [{ "dname":"Ecommerce"},{"dname":"Banking"},{"dname":"Healthcare"},{"dname":"Travel"},] }] 
     } 

$(document).ready(function() { 
    var count = Object.keys(jsonList.Users).length 
    $('#res').html(count); 

    var listItems= ""; 
    for (var i = 0; i < jsonList.Users.length; i++){ 
     listItems+= "<option value='" + jsonList.Users[i].pid + "'>" + jsonList.Users[i].loc + "</option>"; 
    } 
    $("#Location").html(listItems); 

    var listItems3 = ""; 
    for (var i = 0; i < jsonList.Users['cat']['dname'].length; i++) { 
     listItems2 += "<option value='" + jsonList.Users[i].pid + "'>" + jsonList.Users[i].cat.dname + "</option>"; 
    } 
    $("#Category").html(listItems3); 
} 
); 

function getcount() 
{ 
    var loc = document.getElementById('Location').value; 
    var cat = document.getElementById('Category').value; 
    var count = Object.keys(jsonList.Users).length // Where condition required.. when Location and Category are available.. For each combination (Location + Category), how many users and what are the pid's 
    $('#res').html(count); 
} 
</script>

什麼我在上面的代碼中缺少類別下拉一代？

如何根據位置和類別值篩選json（每個組合的相應pid列表）？

編輯：

要求：

第一：PID的誰是從位置 '班加羅爾' 和具有類 '銀行'（合成PID = 2）

二列表：來自欽奈的pid的列表或者具有類別的電子商務類別（結果pid => 3,6）

來源

2015-11-20 Satheesh Panduga

你是不是想填充負載的城市，然後，根據選擇，填充類？ – Cory

沒有依賴類別的位置..我想知道的pid的總數和位置+類別 –

您要求的「每個組合的pid和pid的計數」的pid的列表只有1個pid每個位置。不知道你在找什麼 – Cory

不確定你想要什麼，但是這裏有一個窩基於json提供的一組下拉菜單。你可能一直在尋找這個循環來填充類別

for (var i = 0; i < jsonList.Users.length; i++){ 
    listItems+= "<option value='" + jsonList.Users[i].pid + "' data-ind='"+i+"'>" + jsonList.Users[i].loc + "</option>"; 
    pidres+= "Location: " +jsonList.Users[i].loc+ ". PID: " +jsonList.Users[i].pid+ ". Number of categories: " +jsonList.Users[i].cat.length + "<br />" 

    //loop all cats 
    for (var j = 0; j < jsonList.Users[i].cat.length; j++) { 

    listItems3 += "<option value='" + jsonList.Users[i].cat[j].dname + "'>" + jsonList.Users[i].cat[j].dname + "</option>"; 


    } 
} 

//then to filter the results 
$("#Category > option").each(function() { 
if(usedNames[this.text]) { 
    $(this).remove(); 
} else { 
    usedNames[this.text] = this.value; 
}

}）;

這裏是一個demo

來源

2015-11-21 00:38:05 Cory

非常感謝Cory！我會寫按鈕點擊事件來顯示每個下拉值組合的pid列表 –

無法從嵌套json生成下拉菜單並對其進行過濾

回答

相關問題