onclick 错误“.forEach 不是函数”答案

【问题标题】：onclick error ".forEach is not a function"onclick 错误“.forEach 不是函数”
【发布时间】：2020-12-07 16:44:57
【问题描述】：

我对 javascript 还很陌生，并且正在尝试在单击按钮时从 data.js 文件加载 JSON。 JSON 存储为变量 large_traits。
我确定我需要进行其他更改才能正确附加到 html 文件，但我目前试图找出的问题是以下错误

未捕获的 TypeError: large_traits[0].forEach 不是函数

我的 HTML 如下： <button onclick="loadChar()">Submit</button>.

这是我的 javascript 函数：

function loadChar() {

    large_traits[0].forEach((trait, traitDict) => {
        charList = d3.select("characteristics")
        charList.append("li")
            .classed("char-columns", true)
        inputTag = charList.append("input")
            .attr("type", "checkbox")
            .attr("id", traitDict.id)
            .attr("name", traitDict.name)
            .attr("value", traitDict.value)
        inputTag.append("label")
            .attr("for", traitDict.name)
            .text(traitDict.name)
    })}

我正在尝试将每个 JSON 对象加载到带有用户输入复选框的 li 中。

当我 console.log 变量 large_traits 时，它会在控制台中返回： 0: active: {id: "active", name: "active", value: "active", size: "large"} adaptable: {id: "adaptable", name: "adaptable", value: "adaptable", size: "large"} affectionate: {id: "affectionate", name: "affectionate", value: "affectionate", size: "large"} agile: {id: "agile", name: "agile", value: "agile", size: "large"} alert: {id: "alert", name: "alert", value: "alert", size: "large"} aloof: {id: "aloof", name: "aloof", value: "aloof", size: "large"}

感谢任何帮助。

【问题讨论】：

“large_traits”应该是什么？
不知道这个文件里有什么就不能说，但应该是large_traits.forEach...
能否请您 console.log(large_traits) 并将结果添加到问题描述中？
large_traits[0] 是一个数组吗？如果没有，则不能使用 foreach 方法
large_traits[0] 是单个元素，不可迭代。

标签： javascript html d3.js

【解决方案1】：

我猜只是您正在访问数组的第一个元素而不是数组本身。试试：

function loadChar() {
  large_traits.forEach((trait, traitDict) => {
    charList = d3.select("characteristics")
    charList.append("li")
      .classed("char-columns", true)
    inputTag = charList.append("input")
      .attr("type", "checkbox")
      .attr("id", traitDict.id)
      .attr("name", traitDict.name)
      .attr("value", traitDict.value)
    inputTag.append("label")
      .attr("for", traitDict.name)
      .text(traitDict.name)
  })
}

【讨论】：

【解决方案2】：

使用您的 console.log，您的 large_traits[0] 似乎是一个对象

那就试试吧：

Object.entries(large_traits[0]).forEach(([trait,traitDict]) =>

【讨论】：