Question

我为datatables元素生成了一个json对象。我想重用此代码作为选择选项下拉列表的输入。

该对象返回大量数据，但我只需要它的名称和ID。这是对象：

    {"data":[
{"DT_RowId":"row_2","suppliers":
    {"SupplierAcc":"BNP002","SupplierName":"BNP Paribas Leasing SolutionsLtd","SupplierAddr1":"Northern Cross","SupplierAddr2":"Basing View","SupplierAddr3":null,"SupplierAddr4":null,"SupplierCity":"Basingstoke","SupplierCounty":null,"SupplierPCode":null,"SupplierCountry":null}
},
    {"DT_RowId":"row_3","suppliers":{"SupplierAcc":"3663","SupplierName":"BFS Group Ltd T\/ 3663","SupplierAddr1":"Blackmoss Lane","SupplierAddr2":"Scarisbrick","SupplierAddr3":null,"SupplierAddr4":null,"SupplierCity":"Ormskirk","SupplierCounty":"Lancashire","SupplierPCode":"L40 9RW","SupplierCountry":"UK"}
}}],"options":[]}

我需要SupplerName和DT_Row_ID来填充选择选项列表

生成对象的代码用于其他事情，我想知道是否有办法使用它而不是重新编码。

此致皮特

Answer 1

将JSON分配给变量（例如：myData），之后您可以轻松浏览对象并提取所需的值。

例如，包含具有DT_RowID值＆＃39; row_2＆＃39;的两个对象的数组和＆＃39; row_3＆＃39;可以使用myData.data访问。每个元素都像常规JavaScript数组一样被访问，例如myData.data[0]，myData.data[1]等

访问每个对象的属性非常简单。例如，访问SupplierName下第一个（也是唯一一个）供应商的row_2将如下所示：

myData.data[1].suppliers.SupplierName;

在下面的示例中，我已经提取了您要查找的值，并将它们附加到一个String中，该String包含使用其选项填充select所需的HTML。我已将DT_RowId指定为值，将SupplierName指定为显示的文本。

<强>演示

http://jsfiddle.net/BenjaminRay/hzgbgqnu/

<强> HTML

<select id="mySelect"></select>

<强>的JavaScript

    var myData = {
    "data": [{
        "DT_RowId": "row_2",
            "suppliers": {
                "SupplierAcc": "BNP002",
                "SupplierName": "BNP Paribas Leasing SolutionsLtd",
                "SupplierAddr1": "Northern Cross",
                "SupplierAddr2": "Basing View",
                "SupplierAddr3": null,
                "SupplierAddr4": null,
                "SupplierCity": "Basingstoke",
                "SupplierCounty": null,
                "SupplierPCode": null,
                "SupplierCountry": null
        }
    }, {
        "DT_RowId": "row_3",
            "suppliers": {
                "SupplierAcc": "3663",
                "SupplierName": "BFS Group Ltd T\/ 3663",
                "SupplierAddr1": "Blackmoss Lane",
                "SupplierAddr2": "Scarisbrick",
                "SupplierAddr3": null,
                "SupplierAddr4": null,
                "SupplierCity": "Ormskirk",
                "SupplierCounty": "Lancashire",
                "SupplierPCode": "L40 9RW",
                "SupplierCountry": "UK"
        }
    }],
        "options": []
};

// Iterate through the JSON object and build the options for our select
var options = '';
for (i = 0; i < myData.data.length; i++) {
    // Access Supplier Name using:  myData.data[i].suppliers.SupplierName
    // Access DT_RowID using:  myData.data[i].DT_RowId
    options += '<option value=' + myData.data[i].DT_RowId + '>' + myData.data[i].suppliers.SupplierName + '</option>';
}

$(function () {
    // Populate the select options
    $('#mySelect').html(options);
    // Demonstrate that the value has been properly set
    $('#mySelect').on('change', function () {
        alert('Selected value: ' + $(this).val());
    });
});

PS：你帖子中的JSON在结尾附近有一个额外的}。最后一行：}}],"options":[]}应为：}],"options":[]}。如果您对options没有用处，可以将最后一行更改为}]};来删除它。

重用Json对象来填充选择选项

1 个答案: