锚标记未重定向到 html 中的 link

Question

我正在调用 api 并希望将 api 结果的 uri 属性填充到 html 中。我正在调用一个函数，并在其中尝试以这种方式执行运行循环 3 次，并希望显示每个对象的 uri 属性的 3 个链接。但这不是预期的运行并指向“datares.jsonData.data[i]”并抛出错误。这里有什么问题？

let text = document.getElementById("textBody2");
for(let i =0; i< 10; i++){
text.innerHTML = "<a href= 'datares.jsonData.data[i].uri'>Linkkkk</a>";
}

<p id="textBody2" style="text-align: center;"></p>

{
  "jsonData": {
    "data": [
      {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "uri": 'http://dummy.restapiexample.com/api/v1/employees'
},
     {
    "userId": 2,
    "id": 1,
    "title": "delectus aut autem",
    "uri": 'http://dummy.restapiexample.com/api/v1/employee1'
},
      {
    "userId": 3,
    "id": 1,
    "title": "delectus aut autem",
    "uri": 'http://dummy.restapiexample.com/api/v1/employee2'
}
    ],
    "metadata": {}
  },
  "meta": {}
}

Answer 1

几件事：

"<a href= 'datares.jsonData.data[i].uri'>Linkkkk</a>" 是语法错误。应该是 "<a href= "+datares.jsonData.data[i].uri+">Linkkkk</a>".
您正在覆盖 HTML 每个循环周期。相反，使用 +=

datares = {
  "jsonData": {
    "data": [{
        "userId": 1,
        "id": 1,
        "title": "delectus aut autem",
        "uri": 'http://dummy.restapiexample.com/api/v1/employees'
      },
      {
        "userId": 2,
        "id": 1,
        "title": "delectus aut autem",
        "uri": 'http://dummy.restapiexample.com/api/v1/employee1'
      },
      {
        "userId": 3,
        "id": 1,
        "title": "delectus aut autem",
        "uri": 'http://dummy.restapiexample.com/api/v1/employee2'
      }
    ],
    "metadata": {}
  },
  "meta": {}
}
let text = document.getElementById("textBody2");
for (let i = 0; i < 3; i++) {
  text.innerHTML += "<a href= "+datares.jsonData.data[i].uri+">Linkkkk</a>";
}

<p id="textBody2" style="text-align: center;"></p>

锚标记未重定向到 html 中的 link

anchor tag not redirecting to link in html

javascript

html

json

uri

anchor