Question

我试图按照以下代码填充json下拉并过滤掉它们。我可以实现直接字段，但无法为嵌套字段加载下拉列表。一旦填充了两个下拉列表，我想过滤它们以查看每个组合的pid列表。

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

我在上面的类别下拉代码代码中缺少什么？

如何根据位置和类别值（每个组合的相应pid列表）过滤json？

修改

要求：

首先：来自位置'班加罗尔'并且具有'银行'类别的pid列表（结果pid = 2）

第二：来自Chennai OR的pid列表中有类别电子商务类别（结果pid =＆gt; 3,6）

Answer 1

不确定你想要什么，但这里有一组工作的下拉列表，根据提供的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

无法从嵌套的json生成下拉并过滤它

1 个答案: