使用jquery获取下拉列表的json数据不起作用答案

【问题标题】：Getting json data for dropdown list using jquery not working使用jquery获取下拉列表的json数据不起作用
【发布时间】：2018-11-09 14:54:00
【问题描述】：

要查找有关如何从 api 调用中读取 json 的信息，我们必须填充一个下拉列表。

[
   {
       "name": "jira",
       "description": "The default JIRA workflow."
   },
  {
       "name": "Business Review and Build",
       "description": "The default JIRA workflow starting point."
  }
]

json 似乎没有打开和关闭 { .. }。它看起来基本上就像我在上面粘贴的内容。我猜它就像一个包含两个值、名称和描述的匿名数组。它是通过一个运行一个输出这个 json 的 go 脚本的 url 来检索的。

我尝试使用 jquery，但类似这样的内容不显示任何选项。

function populateWF() {
    let dropdown = $('#projWF');
    dropdown.empty();
    dropdown.append('<option selected="true" disabled>Choose a workflow');
    dropdown.prop('selectedIndex', 0);

    const url = 'http://esjira01d.internal.company.com:8088/workflows';

    $(document).ready(function() {
       $.getJSON(url, function(obj) {
         $(obj).each(function() {
             dropdown.append($('<option>/option>')
             .val(this.Name).html(this.Description));
        }); #each
      }); #getJSON
   }); #ready
}

选项框确实会显示，并且会显示有关选择工作流程的消息。它似乎只是轰炸了实际的 getJSON。

它不会在下拉列表中显示任何内容。如果我转到 url，它会显示似乎是 json 的内容。如果我去 jlint 并输入我认为它返回的内容，它会说它是有效的。

【问题讨论】：

只需使用普通的 for 循环或 foreach...
如果我在顶部使用带有 { "wf": 的 json 数据并在底部使用右括号，它似乎可以工作，但他 go api 并没有以这种方式传递它。它没有带名称的开/关括号（例如，“wf”）。我不知道如何修改 getJSON 和每个循环在没有这些东西的情况下工作。
请看我的回答。 JSON 开头和结尾不需要{}
我现在从你的 cmets 看到这不是一个对象。这些是一些很好的解决方法。想知道是否有一点使用 map 或只使用 forEach 是一件很有趣的事情。我想知道一种方法是否比另一种更有效。
地图在这里没有意义

标签： javascript jquery json

【解决方案1】：

您返回的数据是一个普通的以 JSON 编码的对象数组。要获取值，您可以使用简单的 for 循环或 .forEach() 函数：

let obj = '[{"name":"jira","description":"The default JIRA workflow."},{"name":"Business Review and Build","description":"The default JIRA workflow starting point."}]';

obj = JSON.parse(obj);

let dropdown = $("#dropdown");

obj.forEach(function(e) {
  let option = $('<option></option>');
  option.val(e.name);
  option.html(e.description);
  dropdown.append(option);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown"></select>

function populateWF() {
    let dropdown = $('#projWF');
    dropdown.empty();
    dropdown.append('<option selected="true" disabled>Choose a workflow');
    dropdown.prop('selectedIndex', 0);

    const url = 'http://esjira01d.internal.company.com:8088/workflows';

    $(document).ready(function() {
       $.getJSON(url, function(obj) {
        obj.forEach(function(e) {
          let option = $('<option></option>');
          option.val(e.name);
          option.html(e.description);
          dropdown.append(option);
        });
      }); 
   }); 
}

【讨论】：

如果可以轻松调整现有代码，这会很酷，但由于某种原因它没有填充下拉列表。

【解决方案2】：

您收到的结果是一个数组而不是对象。您可以使用.map() 函数来创建选项。

var result = [
   {
       "name": "jira",
       "description": "The default JIRA workflow."
   },
  {
       "name": "Business Review and Build",
       "description": "The default JIRA workflow starting point."
  }
]

 $(document).ready(function() {
     
     result.map(function(item) {
         $("select").append($('<option></option>').val(item.name).html(item.description));
     }); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

【讨论】：