AJAX jquery返回json数据循环键值答案

【问题标题】：AJAX jquery returned json data looping key and valueAJAX jquery返回json数据循环键值
【发布时间】：2016-09-15 15:27:05
【问题描述】：

大家好，我目前在调用我的 ajax Coldfusion .cfc 页面时返回了以下 JSON：

"[{\"USERA\": \"LiveP\", \"STATE\": \"None Given\", \"ROLES\": \"District Administrator<br/>Personnel Admin<br/>**** Coordinator\", \"ROLEASSIGNED\": \"LG AdminPersonnel System\", \"ADDRESS\": \"None Given\", \"UPDATEURL\": \"/personnel/search_ajax.cfc?func=edit=2*******\", \"TELEPHONE\": \"None Given\", \"ADDRESS2\": \"None Given\", \"ZIPCODE\": \"None Given\", \"LOCATION\": \"<a href=\\\"locations.cfm?func=view&locationID=\\\"2*******\\\">Demo New School (Primary)</a>\", \"SYSTEMID\": 87024, \"HOMETELEPHONE\": \"None Given\", \"MANAGEURL\": \"tools.cfm?userID=2*******\", \"MERGEURL\": \"/personnel/search_ajax.cfc?func=merge&userID=2*******\", \"EMAIL\": \"noaddress@noaddress.com\", \"SUBJECTTAUGHT\": \"None Given\", \"CITY\": \"None Given\", \"POSITION\": \"None Given\"}]"

当我在下面运行这段代码时，它会给我上面的 JSON：

success: function(data) {
    var sData = JSON.stringify(data);                                     
    console.log(sData);
},

现在如果我不使用 JSON.stringify 那么我的输出是：

[Object]

我最终想要做的是遍历这个返回的 JSON 并获取 key 和 value 而无需知道 key（又名 sData.Address、sData.Address2、sData.City 等）。

我打算把它做成这种格式：

var theHTML = "";

$.each(data,function(key,value){
   theHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
})

只返回：

<tr><td>0</td><td>[object Object]</td></tr>

我确定我只是错过了一些小东西，但我就是找不到那是什么。

【问题讨论】：

你可以解析JSON值然后迭代。检查stackoverflow.com/questions/7861032/…
出于好奇，如果您只期望数组中有一个元素，为什么不跳过它并返回结构？
@Leigh 因为我需要把它放在表格格式中。
（编辑）不需要数组。事实上，首先使用数组是导致问题的原因。由于 cfc 返回一个数组，$.each( ) 实际上是循环遍历 array 本身（不是第一个位置的结构）。所以回调函数接收到的值与您预期的不同：function (index, element) 而不是function(key, value)。见jQuery.each()。去掉数组，你的原始代码就可以正常工作了。

标签： javascript jquery json ajax coldfusion

【解决方案1】：

看起来您的数据在一个数组中，并且您想要遍历数组中的第一个对象。你可以试试这个。

var theHTML = "";

$.each(data[0],function(key,value){
   theHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
})

【讨论】：

干得好，semone！做到了！欢迎来到 Stackoverflow！

【解决方案2】：

Semone 的解决方案将为您提供所需的内容，但此代码将循环遍历嵌套对象。您可以突出显示/设置嵌套表格的样式或使用任何级别或其他内容进行指示。

http://codepen.io/anon/pen/xEVQZb

JS：

var displayObjectData = function(obj) {   
  for(var key in obj) {
    var value = obj[key];
    if(typeof value == "object") {      
     theHTML += "<tr><td colspan='2'><table>";
     displayObjectData(value);
      theHTML += "</table></td></tr>";
    }
    else {      
      theHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
    }
  }
};
displayObjectData(data);

【讨论】：