$ .getJson函数不附加到div

时间:2017-08-22 01:20:02

标签: jquery html json getjson

所以我试图从提供给我的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中。

那么最好的方法是什么?

1 个答案:

答案 0 :(得分:1)

首先,代码中存在一些语法错误。

你想要照顾的是})

return newDiv.innerHTML = currentDealer
此行返回一个作业,而不是您可能想要的newDiv。相反,您应该在返回元素(newDiv.innerHTML = <value>)之前先分配innerHTML(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&amp; console.dir是您的朋友),并与您尝试分配给data type相匹配>

    这是一个有效的演示:
    https://codepen.io/hydrospell/pen/KvRgvB