Question

我正在进行一些重构并尝试创建一个通用方法，该方法能够使用对象数据填充给定的下拉列表。但是，我遇到了一个关于如何访问不同对象数据通用的问题。例如：

原创方法

function populateDropdown(element, data) {
for (var i = 0; i < data.length; i++) 
    element.append('<option value=' + data[i].ID + '>' + data[i].Name + '</option>');
}

如果给定的对象数组包含字段ID和Name，则此方法有效。我想要实现的是这样的

function populateDropdown(element, data, valueField, dataField) {
for (var i = 0; i < data.length; i++) 
    element.append('<option value=' + data[i].valueField + '>' + data[i].dataField + '</option>');
}

当我尝试调用此方法时，我得到Undefined：populateDropdown($('#myDropdown'), dataArray, "ID", "DataType");

当我尝试没有""时，我收到控制台错误，指出ID和DataType未定义。有没有办法告诉我的方法我想从对象中得到哪些字段？

Answer 1

使用bracket notation -

function populateDropdown(element, data, valueField, dataField) {
    for (var i = 0; i < data.length; i++) 
        element.append('<option value=' + data[i][valueField] + '>' + data[i][dataField] + '</option>');
}

注意 - 为了使这对属性值中的特殊字符更具弹性，我会这样做：

$('<option />', { value : data[i][valueField] }).text(data[i][dataField]).appendTo(element);

Answer 2

您可以执行data[i][valueField]和data[i][dataField]：

function populateDropdown(element, data, valueField, dataField) {
for (var i = 0; i < data.length; i++) 
    element.append('<option value=' + data[i][valueField] + '>' + data[i][dataField] + '</option>');
}

Answer 3

使用bracket notation []访问媒体资源：

function populateDropdown(element, data, valueField, dataField) {
    for (var i = 0; i < data.length; i++) 
        element.append('<option value=' + data[i][valueField] + '>' + data[i][dataField] + '</option>');
}

Answer 4

其他人说了什么，不确定这是否有用，如果你没有这样做，你也可以定义默认值......

function populateDropdown(element, data, valueField, dataField) {
    valueField = valueField || 'some_default_value';
    dataField = dataField || 'some_default_value';

    for (var i = 0; i < data.length; i++) 
        element.append('<option value=' + data[i][valueField] + '>' + data[i][dataField] + '</option>');
}

然后你可以像这样调用它，将valueField和dataField params输出：

populateDropdown('someElement', 'someValue');

使用泛型方法访问对象值

4 个答案: