javascript - 仅使用 json 数据集中数组中的一些值填充选择下拉列表
问题描述
使用这个 json 输入:
[
{
"tableName": "data",
"attributes": [
{
"id": "att1"
},
{
"id": "att2"
},
{
"id": "att3"
},
{
"id": "att8"
}
]
}
]
我有两个选择下拉列表,在第一个下拉列表中,我从我的 json 文件中获取 tableNames,因此第一个下拉列表包含 data、data1、data2 等值,用户将通过选择其“tableName”来选择一个表。在我的第二个下拉列表中,我只想要第一个下拉列表中先前选择的 tableName 的属性 ID。我被困在这部分,因为它仍然遍历整个数据集,而不仅仅是单个数据的属性。这是不正确的,但这是我目前拥有的,它只是获取我所有数据集的第一个属性
$(document).ready(function () {
var url = "listData.json";
$.getJSON(url, function (data) {
console.log(data);
$('#dropdown-1').append('<option selected="true" disabled>Select Data</option>');
var i = 0;
$.each(data, function (index, value) {
// APPEND OR INSERT DATA TO SELECT ELEMENT.
$('#dropdown-1').append('<option value>' + value.attributes[i].id + '</option>');
i++;
});
});
});
解决方案
您可以.filter
根据用户从第一个下拉列表中选择的值来过滤您的 json 数组,具体取决于此 get requiredattributes
并循环遍历它,然后ids
在第二个下拉列表中附加带有 required 的选项。
演示代码:
//your json data
var data = [{
"tableName": "data1",
"attributes": [{
"id": "att1"
},
{
"id": "att"
},
{
"id": "att3"
},
{
"id": "att5"
}
]
}, {
"tableName": "data2",
"attributes": [{
"id": "att"
},
{
"id": "att2"
},
{
"id": "att3"
},
{
"id": "att8"
}
]
}]
$('#dropdown-1').append('<option selected="true" disabled>Select Data</option>');
var i = 0;
$.each(data, function(index, value) {
// APPEND OR INSERT DATA TO SELECT ELEMENT.
$('#dropdown-1').append('<option value=' + value.tableName + '>' + value.tableName + '</option>');
});
//on change of 1st dropdown
$(document).on('change', '#dropdown-1', function() {
var value = $(this).val(); //get value
//filter json array
var attribute = $(data)
.filter(function(i, n) {
return n.tableName === value;
});
//empty second dropdown
$('#dropdown-2').html("");
$('#dropdown-2').append('<option selected="true" disabled>Select attributes</option>');
//loop through attribute
$.each(attribute[0].attributes, function(index, value) {
//append datas
$('#dropdown-2').append('<option value=' + value.id + '>' + value.id + '</option>');
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown-1"></select>
<select id="dropdown-2"></select>
推荐阅读
- c# - 使用 MassTransit 结合 UseRetry() 和 UseScheduledRedelivery()
- java - 在@RestController 中保留一个可用于整个类甚至应用程序的参数,而不是复制粘贴相同的代码?
- java - 对象中的可观察和嵌套列表
- c++ - 具有参数化构造函数的对象数组
- swift - 转换到另一个视图控制器时应用程序崩溃而没有有关崩溃的信息
- c++ - 在 O(log2(amount_bits)) 中使用二进制搜索查找 floor(log2(int)) 时遇到问题
- python - PySpark Dataframe 将列融合为行
- java - 一次从数据库加载 x 行,显示它们,加载下 x 行等等
- python - 使用代理时无头 Chrome 返回空 HTML
- elixir - Elixir MapSet vs Enum.member?