javascript - 获取返回的迭代值放入标签

Question

我正在尝试遍历从 API json 对象获得的一些数据并将其放入标签中。问题是当我将它放入标签或使用console.log(text)它时，它会将所有附加数据打印成一行而不是结果。

基本样本 - 我现在得到的：

data1
data1,data2
data1,data2,data2

我在找什么：

data1
data2
data3

这是代码：

const url = "https://alloysystems.freshdesk.com/api/v2/tickets";
fetch(url, {
    method: "GET",
    withCredentials: true,
    headers: {
      // needed to base64 encode my key with ":x" at the end of the api key then I used that for the authorization header.
      "authorization": "Basic YOUWILLNEVERGETMYKEYLOL"
    }
  })
  .then(resp => resp.json())
  .then(data => {
    let text = "";
    for (let i = 0; i < data.length; i++) {
      const pre = document.createElement('pre');
      text += "Subject: " + JSON.stringify(data[i].subject) + "<br>" +
        "CC Emails: " + JSON.stringify(data[i].cc_emails).replace("[]", "No Emails are CC'd").replace("[", "").replace("]", "") + "<br>" +
        "Ticket Creation Date: " + JSON.stringify(data[i].created_at) + "<br>" +
        "Ticket Status: " + JSON.stringify(data[i].status).replace("2", "Open").replace("3", "Pending").replace("4", "Resolved").replace("5", "Closed").replace("6", "Waiting On Customer");
      pre.innerText += text
      console.log(text)
      document.querySelector('span.ms-font-m').appendChild(pre);
    }
  })

结果如下：

我也尝试过使用这样的返回函数，return text但这return pre会导致问题，因为 for 循环会在第一个循环上停止。

任何想法都会很棒。谢谢你。

标签： javascripthtml

Answer 1

如果每个条目都有自己的<pre>容器，您可以在循环内创建元素。像这样：

const data = [{'subject':'test1'},{'subject':'test2'}];
const output = document.querySelector('span.ms-font-m');

for (let i = 0; i < data.length; i++) {
  let text = "Subject: " + JSON.stringify(data[i].subject) + "<br>";
  let pre = document.createElement('pre');
  pre.innerHTML = text;
  output.appendChild(pre);
}

<span class="ms-font-m"></span>

但是由于您将所有条目连接到一个变量text中，您只需要创建一个<pre>元素，您就可以在循环外处理它。在循环之后填充并附加一次。

const data = [{'subject':'test1'},{'subject':'test2'}];
const pre = document.createElement('pre');
let text = "";

for (let i = 0; i < data.length; i++) {
  text += "Subject: " + JSON.stringify(data[i].subject) + "<br>";
}

pre.innerHTML = text;
document.querySelector('span.ms-font-m').appendChild(pre);

<span class="ms-font-m"></span>