从rest接口获取JSON [Object object]答案

【问题标题】：Getting JSON [Object object] from rest interface从rest接口获取JSON [Object object]
【发布时间】：2017-10-02 16:01:18
【问题描述】：

我有一个使用 apache camel 的简单 Web 服务，它在 HTTP GET 上将数据库中的列名作为 JSON 返回。

通过单击按钮将 GET 绑定到我的前端。在开发人员工具中单击时，我可以看到 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 对象。

请指教，谢谢。

【问题讨论】：

标签： jquery json ajax rest

【解决方案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>

【讨论】：