$.getJson 函数不追加到 div

Question

所以我正在尝试从提供给我的JSON文件中获取.json数据，遍历它，每次创建一个div并将该数据附加到其中。

到目前为止，我有这个功能：

$.getJSON( "https://api.myjson.com/bins/14uau1", function(data) {
var dealers = data.dealers.map(dealer => {
let currentDealer = dealer.data;
let newDiv = document.createElement("div");
newDiv.setAttribute("id", currentDealer.customerID);
return newDiv.innerHTML= currentDealer;
})
dealers.map(i => {
let holder = document.getElementById("dealer");
holder.appendChild(i);
console.log(i);
})

但是，每当我尝试运行它时，它都会给我这个错误

index:212 Uncaught TypeError: Failed to execute 'appendChild' on   'Node': parameter 1 is not of type 'Node

我意识到这意味着它正在获取一个不被视为 HTML 元素的对象，因此它不能通过 .innerHTML 附加到div 中。

那么最好的方法是什么呢？

Answer 1

首先，您的代码中存在一些语法错误。

有一个缺少})您需要处理。

return newDiv.innerHTML = currentDealer
此行返回一个赋值，而不是您可能预期的那样返回newDiv。相反，你应该先分配内部 HTML (newDiv.innerHTML = <value>(，然后再返回元素 (return newDiv(。这是您遇到uncaught TypeError错误的地方。

您还将Javascript对象(currentDealer(分配给innerHTML而不是String。如果要输出此对象的 JSON 字符串，请使用JSON.stringify。否则，请确保分配所需的实际字段，例如currentDealer.data.companyID.

另请注意，在此行newDiv.setAttribute("id", currentDealer.customerID);上，您正在尝试分配currentDealer.customerID这是一个未定义的值。

所以总结一下

1. 首先，检查语法错误
2. 然后，检查您正在分配的值是否存在(console.log和console.dir是您的朋友(并与您尝试分配的数据类型匹配

这是一个工作演示：
https://codepen.io/hydrospell/pen/KvRgvB