如何使用所有对象的通用JavaScript函数将JSON对象显示为HTML下拉菜单的选项 [英] How to display JSON objects as options of a dropdown in HTML, using a common JavaScript funciton for all objects
问题描述
我在JSON文件(ACodes和BCodes)中有两组数据，我想读取这些数据并将其显示为HTML文件中两个不同下拉菜单的选项.我想拥有一个通用的JavaScript函数，可以与之配合使用(如下所示)，但我没有得到想要的输出. 非常感谢您对我要去哪里的问题的帮助！
I have two sets of data in a JSON file (ACodes and BCodes), which I want to read and display as the options of two different dropdowns in an HTML file. I want to have one common JavaScript function that I can use to get along with the same (shown below) but I am not getting the desired output. Help about where I am going wrong is much appreciated!
HTML
<script>
var select, option, arr, i;
function loadJSON(var x){
if(x.match == "A"){
array = JSON.parse(ACodes);
select = document.getElementById('dd1');
for (i = 0; i < array.length; i++) {
option = document.createElement('option');
option.text = array[i]["Code"];
select.add(option);
}
}
else if(x.match == "B"){
array = JSON.parse(BCodes);
select = document.getElementById('dd2');
for (i = 0; i < array.length; i++) {
option = document.createElement('option');
option.text = array[i]["Curr"];
select.add(option);
}
}
}
</script>
<body onload="loadJSON('A');laodJSON('B')">
<select id="dd1"></select>
<select id="dd2"></select>
</body>
JSON
ACodes = '[{"Code":"BHAT"}, {"Code":"MALY"}]';
BCodes = '[{"Curr":"CAC"},{"Curr":"CAD"}]';
推荐答案
- 在
loadJSON(var x)=>loadJSON(x)处删除var
- 删除
x.match == "A"处的.match，您似乎想将x与特定值进行比较，而不是将其作为regexp进行测试，因此请更改为x === "A"
身体负荷时 -
laodJSON('B');是错字.
- remove var at
loadJSON(var x)=>loadJSON(x) - remove .match at
x.match == "A", you seems to want to compare x with specific value, not testing it as regexp, so change tox === "A" laodJSON('B');at body onload is typo.
有一些可重复使用的代码，您可以吸引依赖于x的值并使代码更短.这不是必须要做的步骤，因为它不会导致您的原始代码无法正常工作.
There's some reusable codes, you can attract the value depends on x and make the code shorter. This step is not a must do, as it won't cause your origin code unable to work.
<body onload=" loadJSON('A');loadJSON('B');">
<select id="dd1"></select>
<select id="dd2"></select>
<script>
var select, option, arr, i;
var ACodes = '[{"Code":"BHAT"}, {"Code":"MALY"}]';
var BCodes = '[{"Curr":"CAC"},{"Curr":"CAD"}]';
function loadJSON(x){
var array, select, target;
if (x === 'A') {
array = JSON.parse(ACodes);
select = document.getElementById('dd1');
target = 'Code';
} else if (x === 'B') {
array = JSON.parse(BCodes);
select = document.getElementById('dd2');
target = 'Curr';
}
for (i = 0; i < array.length; i++) {
option = document.createElement('option');
option.text = array[i][target];
select.add(option);
}
}
</script>
</body>
要更动态地创建它，可以使该函数接受更多参数，以便可以对其进行更多控制.演示位于 jsfiddle .
to create it more dynamically, you can make the function accept more params, so you can have more control over it. Demo is on jsfiddle.
// Append options to exist select
function loadJSON(jsonObj, key, selectId) {
var arr = JSON.parse(jsonObj);
// Get by Id
var select = document.querySelector('select#' + selectId);
// Loop through array
arr.forEach(function(item) {
var option = document.createElement('option');
option.text = item[key];
select.add(option);
});
}
// Append select with id to target.
function loadJSON2(jsonObj, key, selectId, appendTarget) {
// Get the target to append
appendTarget = appendTarget ? document.querySelector(appendTarget) : document.body;
var arr = JSON.parse(jsonObj);
// Create select and set id.
var select = document.createElement('select');
if (selectId != null) {
select.id = selectId;
}
// Loop through array
arr.forEach(function(item) {
var option = document.createElement('option');
option.text = item[key];
select.add(option);
});
appendTarget.appendChild(select);
}
这篇关于如何使用所有对象的通用JavaScript函数将JSON对象显示为HTML下拉菜单的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
