Question

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

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

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

我尝试使用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。

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

Answer 1

您获得的数据是编码为JSON的正常对象数组。要获取值，可以使用简单的for循环或.forEach()函数：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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);
        });
      }); 
   }); 
}

Answer 2

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

＆＃13;

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));
     }); 

});

＆＃13;

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

＆＃13;

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

2 个答案: