来自 Object.keys(data) 的 getElementById答案

【问题标题】：getElementById from Object.keys(data)来自 Object.keys(data) 的 getElementById
【发布时间】：2019-04-05 19:38:40
【问题描述】：

我有简单的 Ajax 代码，解析 Json 数据并在里面填充动态 div。当我想动态获取getElementById 时遇到问题。

我的键数组返回成功 = ["blue","red","etc"..] 我有蓝色数据、红色数据、等数据 div id。

<div id="blue-data">myblue</div>
<div id="red-data">myred</div>
<div id="etc-data">myetc</div>

我的代码如下：

      success: function(data) {
      Object.keys(data).forEach(function(key,index) {


            console.log(document.getElementById(''+key+'-data').innerHTML);


         });

});

当我跑步时：

console.log(document.getElementById(''+key+'-data').innerHTML);

线

Error

null is not an object (evaluating 'document.getElementById(''+key+'-data').innerHTML')

但在控制台中，输出是；

myblue
myred
myetc

我该如何解决这个问题？我想在值中使用键数据 div。

【问题讨论】：

Object.keys 用于对象，而不是数组。
仅供参考，''+ 在这种情况下毫无用处
@epascarello 我删除了同样的错误。
失败的关键是什么？ console.log(key)，我猜是其中之一不存在
@JuanCaicedo No. .forEach() 参数是 key 和 index。 data 是 OP 试图循环的内容，但这是一个不正确的循环。

标签： javascript html

【解决方案1】：

如果您返回的数据是一个数组，如您所说，那么Object.keys 不是您应该使用的，因为它用于迭代对象的属性（键）。如果你只有一个数组，直接循环遍历它：

// This is just simulating the result of your `success` handler's argument:
let data= ["blue","red","etc"];

// This would be INSIDE of your success callback function
data.forEach(function(item) {
  console.log(document.getElementById(item + '-data').textContent);
});

<div id="blue-data">myblue</div>
<div id="red-data">myred</div>
<div id="etc-data">myetc</div>

【讨论】：

dude 您的示例正在工作，但在我的代码中说：找不到变量：结果，当我将结果更改为键时，给出； key.forEach 不是函数。（在 'key.forEach(function(key) { console.log(document.getElementById(key + '-data').textContent); })' 中，'key.forEach' 未定义）
@SwiftDeveloper 在我的示例中，我将变量命名为 result。当然，您需要修改名称以匹配您的代码。在您的代码中，您将使用data.forEach()。
说 data.forEach 不是一个函数。（在 'data.forEach(function(item) { console.log(document.getElementById(item + '-data').textContent); })' 中，'data.forEach' 未定义）
@SwiftDeveloper 那么您实际上并没有您在问题中声明的数组。 在您的 success 处理程序中添加 console.log(data) 作为第一行，然后告诉我们它报告了什么。
他所说的数组是 Object.keys(data) ..... 如果它正在循环并出错，那么它工作正常。问题是关键之一不在 DOM 中，他必须调试它。从字面上看，我们无能为力。