jquery - 从rest接口(interface)获取JSON [Object对象]

Question

我有一个使用 apache Camel 的简单 Web 服务，它在 HTTP GET 上以 JSON 形式从数据库返回列名称。

通过单击按钮将 GET 绑定(bind)到我的前端。单击开发人员工具时，我可以看到 XHR 数据返回我期望的值，但我似乎无法以编程方式将它们拉出来。

我尝试读取的数据示例:

[{"COLUMN_NAME":"EID"},{"COLUMN_NAME":"USERID"},{"COLUMN_NAME":"LAST_UPDATE"},{"COLUMN_NAME":"LAST_UPDATED_BY"},{"COLUMN_NAME":"CREATED_DATE"}]

$(document).ready(function () {
    $('#getButton').click(function () {
    $.ajax({
        url: 'http://localhost:8090/rs/persons'
    }).then(function(data) {
            $.each(data, function(index, value) {
            $('#dropList').append(
                $('<option>', {text: value})
            )})
        });
    });
});

使用上面的代码，我的选择列表 (dropList) 会为返回集中的每个项目填充 Object 对象。

请指教，谢谢。

Answer 1

value 指的是对象。要附加文本，您需要引用该对象的属性:

$('<option>', {
  text: value.COLUMN_NAME // note the property name here
});

另请注意，您可以通过创建单个 HTML 字符串来稍微优化逻辑，这样您只需调用 append() 一次:

var data = [{
  "COLUMN_NAME": "EID"
}, {
  "COLUMN_NAME": "USERID"
}, {
  "COLUMN_NAME": "LAST_UPDATE"
}, {
  "COLUMN_NAME": "LAST_UPDATED_BY"
}, {
  "COLUMN_NAME": "CREATED_DATE"
}]

var html = data.map(function(o) {
  return `<option>${o.COLUMN_NAME}</option>`; 
}).join('');
$('#dropList').append(html);

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