将 json 数据转换为选择下拉选项答案

【问题标题】：Converting json data to select drop down options将 json 数据转换为选择下拉选项
【发布时间】：2014-04-17 13:35:11
【问题描述】：

这是我从 ajax 调用返回的数据（编辑：现在是 json 格式）：

[{"PROCEDURE_ID":362183,"PROCEDURE_NAME":"Biopsy, Breast; Lumpectomy"}, {"PROCEDURE_ID":558975,"PROCEDURE_NAME":"Biopsy, Cervix"},{"PROCEDURE_ID":558977,"PROCEDURE_NAME":"Biopsy, intrauterine"},{"PROCEDURE_ID":558976,"PROCEDURE_NAME":"Biopsy, Libial"}]

我试图把它放在一个选择下拉列表中，无论我做什么，它都会失败，要么选择选项未定义，要么 jquery 抛出错误。
这是我迄今为止尝试过的 2 种不同的方法（selField 是动态元素）

success: function(json){

         if (json != '' )
            var vx='<option value="">All</option>';
               $.each (json.DATA, function(k, v){

                   vx+='<option value="'+k.Procedure_ID+'">'+v.Procedure_Name+'</option>';
               });
               $(selField).html(vx);
               }

【问题讨论】：

为什么不直接将数据返回为 JSON 而不是 WDDX？将returnformat="json" 添加到远程 CFC 调用中即可。
我最初尝试过。但是仍然发现很难将其作为选择框的选项。成功函数中的代码就是为此。而且我还使用了 $.each (res.DATA, function(k, v)，它会抛出 jquery 错误。我很喜欢，我可以将其更改为 json 格式，但我发现的问题是将数据转换为选择-选项
那么你的 jQuery 代码有问题，或者你的 CF 代码有错误。
是的，返回的数据都是大写的PROCEDURE_ID，但你的变量不是Procedure_ID。我敢打赌，错误是在说明未定义 k.Procedure_ID。
您还为PROCEDURE_ID 指定了不正确的参数。您应该使用v 而不是k。在您的each 迭代器中，函数k 的第一个参数是索引，第二个参数v 是元素。请参阅this fiddle 了解我的意思。

标签： jquery json coldfusion

【解决方案1】：

我从您发布的代码中看到了一些错误。首先，正如 Scott Stroz 提到的，您在 .each 循环中使用驼峰式大小写引用 JSON 数据，但 JSON 数据实际上在所有大写中都有它。 JavaScript 区分大小写，因此需要匹配。其次，您在 .each 循环中使用了错误的参数来引用 PROCEDURE_ID。函数的第一个参数（代码中的k）是循环索引。第二个参数（代码中的v）是元素数据。因此，您需要使用 v 参数同时引用 PROCEDURE_ID 和 PROCEDURE_NAME，如下所示：

vx+='<option value="'+v.PROCEDURE_ID+'">'+v.PROCEDURE_NAME+'</option>';

从 cmets 看来，您也没有解析 JSON 响应。这将使.each 循环无法迭代。您可以使用JSON.parse() 或将AJAX 调用的dataType 定义为'json' assuming that it is properly formatted。

我创建了一个简单的 jsFiddle 来向您展示 JSON 对象的 .each 迭代应该如何工作。

【讨论】：