前端渲染fetch获取的数据问题?

Question

我使用了fetch方法向后端发送了一个请求，获取到了返回数据之后

，该数据是一个对象类型的，我如何批量创建li到该ul中呢？li中要对应对象的属性

后端数据格式

{
  "code": 200,
  "data": [
    "info",
    "true"
  ],
  "message": "\u6210\u529f"
}

Answer 1

data对象，你是想获取data.data那个数组，再按数组元素一个个生成li吧。

这里的话，批量创建li到ul，有三种方式：

1. 每创建一个li就append到ul

const data = ['info', 'data'];
for (let i = 0; i < data.length; i++) {
  const li = document.createElement('li');
  li.textContent = `${data[i]}`;
  document.getElementById('soft').appendChild(li);
}

2. 1的优化版：fragment

const data = ['info', 'data'];

const fragment = document.createDocumentFragment();
for (let i = 0; i < data.length; i++) {
  const li = document.createElement('li');
  li.textContent = `${data[i]}`;
  fragment.appendChild(li);
}
document.getElementById('soft').appendChild(fragment);

3. 直接用innerHTML

直接组装好字符串<li>1</li><li>2</li>然后赋值到ul的innerHTML

const data = ['info', 'data'];
document.getElementById('soft').innerHTML = data.map(item=>'<li>'+item+'</li>').join('');