如何使用Javascript Fetch API将超链接添加到返回数组的每个元素？

Question

Using fetch, I get the following array from an api call:

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

here it appears vertically but when I add it to my web page with

document.body.append(myarr[i])

it appears horizontally like this:

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

So I would like to do two things:

1) present each item vertically and 2) add either a hyperlink: <a href=myfunc(val)>val</a> or onclick event preferably

Here is the full code:

 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]) } }); 

I have attempted, in multiple ways, to add the hyperlink including:

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

Answer 1

Many ways to skin a cat.

 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")); } }); 

Answer 2

I do not like using hyperlinks only to trigger a function, so I would prefer adding a click event to the list.

 const myFunc = value => { console.log( `the user clicked ${ value }` ); }; const arr = [ "BN16 1AA", "BN16 1AB", "BN16 1AD", "BN16 1AE", "BN16 1AF", "BN16 1AG", "BN16 1AH", "BN16 1AJ", "BN16 1AL", "BN16 1AQ" ]; const items = arr.map( value => `<li data-value="${ value }">${ value }</li>` ); const list = document.createElement( 'ul' ); list.innerHTML = items.join( '' ); list.addEventListener( 'click', event => { const value = event.target.getAttribute( 'data-value' ); if ( value ) myFunc( value ); }); document.body.appendChild( list ); 

Answer 3

You could add a table to get data row wise and put onclick with the anchor HTML:

 fetch('http://api.postcodes.io/postcodes/BN16/autocomplete') .then(response => response.json()) .then(data => { arr = data.result let myarr = arr; var table = document.createElement("table"); for (let i = 0; i < myarr.length; i++) { var anchor = document.createElement("a"); anchor.setAttribute("onclick", "return myFunc('" + myarr[i] + "')"); anchor.innerHTML = myarr[i]; anchor.href = "#"; table.innerHTML += '<tr><td>' + anchor.outerHTML + '<td><td>'; } document.body.append(table); }); function myFunc(val) { console.log(val); } 

Answer 4

You can try this :

 fetch('http://api.postcodes.io/postcodes/BN16/autocomplete') .then(response => response.json()) .then(data => { data.result.forEach((item) => { document.body.innerHTML += '<br><a href="#">' + item + '</a>'; }) });