JS中如何映射带索引的对象数组？提取document属性值并展示

首先明确你的问题：控制台返回的不是标准数组，而是以数字为键的普通对象（比如{0: {...}, 1: {...}}），而非原生数组[{...}, {...}]。只要把它转换成标准数组，就能正常遍历提取属性了。

步骤1：将带索引的对象转为标准数组 #

这里有几种常用方法，按需选择：

• 最简洁的方法：用Object.values()
  直接提取对象的所有值，返回标准数组：

  // 假设response是你收到的带索引对象
  const dataArray = Object.values(response);
  

• 类数组场景用Array.from()
  如果返回的对象带有length属性（比如某些API返回的类数组），可以用：

  const dataArray = Array.from(response);
  

• 兼容老版本JS：用Object.keys()遍历
  要是需要兼容ES5及以下环境，遍历键名再取值：

  const dataArray = Object.keys(response).map(key => response[key]);
  

步骤2：提取document属性并渲染表格 #

转换成标准数组后，就可以正常遍历提取每个对象的document属性，动态生成表格内容：

原生JS示例：

// 假设表格tbody的id是doc-table-body
const tableBody = document.getElementById('doc-table-body');

dataArray.forEach(item => {
  const doc = item.document;
  // 创建表格行
  const row = document.createElement('tr');
  // 根据你的document字段填充单元格，这里示例用title和content
  row.innerHTML = `
    <td>${doc.title || ''}</td>
    <td>${doc.content || ''}</td>
  `;
  tableBody.appendChild(row);
});

React示例：

function DocumentTable({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>文档标题</th>
          <th>文档内容</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>{item.document.title}</td>
            <td>{item.document.content}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// 使用组件时传入转换后的数组
<DocumentTable data={dataArray} />

内容的提问来源于stack exchange，提问作者note_note