Question

我有这段代码：`

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);

        for (var i = 0; i < myObj.length; i++) {
            var group_name = myObj[i]["display_name"];
            var group_icon = myObj[i]["icon"];
            function insert_grp_icon(){
                 var src = document.getElementById("list");
                 var img = document.createElement("img");
                 var abc = group_icon;
                 img.src = "xyz.com" + abc;
                 src.appendChild(img);
            };
            document.getElementById("list").innerHTML +=  group_name + insert_grp_icon() ;
        }
    }
};
xmlhttp.open("GET", "get-category-api.txt", true);
xmlhttp.send();
</script>`

此处，“get-category-api.txt”包含JSON响应。这是一组对象。

我需要在显示名称后添加图标（通过group_name），图标的URL存储在“icon”中。由于某种原因，它返回“未定义”。

不知何故，insert_grp_icon（）无效。

对此有任何见解将不胜感激。感谢

Answer 1

由于您尚未创建minimal, complete and verifiable example，因此无法获得太多帮助。

所以我已经完成了这项工作并创建了一些测试数据。

您应该在循环外部移动 insert_grp_icon 函数声明，然后将所需的参数传递给它。如果您想要图标后面的图像，然后插入图像，然后将名称添加为文本节点。

我还在图片和名称之间插入了一条新线，但不管你是否愿意，都取决于你。

＆＃13;

// var myObj = JSON.parse(responseText);
var myObj = [
  {display_name: 'foo', icon: 'a.jpg'},
  {display_name: 'bar', icon: 'b.jpg'},
];

// Define function outside loop
// Creates an image and appends it to target
function insert_grp_icon(target, group_icon) {
  var img = document.createElement("img");
  var abc = group_icon;
  img.src = "xyz.com" + abc;
  target.appendChild(img);
}

for (var i = 0; i < myObj.length; i++) {
  var group_name = myObj[i]["display_name"];
  var group_icon = myObj[i]["icon"];
  var target = document.getElementById("list");

  // If not the first one, insert a new line
  if (i > 0) target.appendChild(document.createElement('br'));

   // Append image to target
   insert_grp_icon(target, group_icon);

  // Append group_name as text
  target.appendChild(document.createTextNode(group_name));
}

＆＃13;

<div id="list"></div>

＆＃13;

无法识别此代码的错误

1 个答案: