javascript - 使用 Javascript fetch api 如何向返回数组的每个元素添加超链接？

Question

使用 fetch，我从 api 调用中获取以下数组:

[
  "BN16 1AA",
  "BN16 1AB",
  "BN16 1AD",
  "BN16 1AE",
  "BN16 1AF",
  "BN16 1AG",
  "BN16 1AH",
  "BN16 1AJ",
  "BN16 1AL",
  "BN16 1AQ"
]

这里它是垂直显示的，但是当我使用

将它添加到我的网页时

document.body.append(myarr[i])

水平显示如下:

BN16 1AABN16 1ABBN16 1ADBN16 1AEBN16 1AFBN16 1AGBN16 1AHBN16 1AJBN16 1ALBN16 1AQ

所以我想做两件事:

1) 垂直展示每个项目和2) 添加超链接:<a href=myfunc(val)>val</a>或者最好是 onclick 事件

完整代码如下:

fetch('http://api.postcodes.io/postcodes/BN16/autocomplete')
  .then(response => response.json())
  .then(data => {
    arr = data.result
    let myarr = arr;
    for (let i = 0; i < myarr.length; i++) {
      document.body.append(myarr[i])
    }
  });

我尝试以多种方式添加超链接，包括:

document.body.append(myarr[i]).onclick = myfunc()

Answer 1

给猫剥皮的方法有很多。

const myFunc = str => console.log(str);
const myarr = ["BN16 1AA", "BN16 1AB", "BN16 1AD", "BN16 1AE", "BN16 1AF", "BN16 1AG", "BN16 1AH", "BN16 1AJ", "BN16 1AL", "BN16 1AQ"];
myarr.forEach(code => {
  let a = document.createElement("a");
  a.textContent = code;
  a.href = "#";
  a.setAttribute("data-code", code);
  a.onclick = function(e) {
    e.preventDefault();
    myFunc(this.getAttribute("data-code"))
  }
  document.body.append(a);
  document.body.append(document.createElement("br"));
});
document.body.append(document.createElement("hr"));

// Or delegated
let div = document.createElement("div");
div.id = "container"
document.body.append(div);
let html = myarr.map(code => `<a href="#" data-code="${code}">${code}</a><br/>`)
div.innerHTML = html.join("");
div.addEventListener("click", (e) => { 
  if (e.target.tagName === "A") {
    e.preventDefault();
    myFunc(e.target.getAttribute("data-code"));
  }
});