如何在UI网格中展示后端返回的嵌套对象数组数据？

核心思路 #

通过两层map遍历嵌套数组：外层遍历数据中心，先处理并渲染数据中心名称（将-替换为空格）；内层遍历对应数据中心下的频道列表，逐个渲染频道名称。如果仅需展示特定数据中心，可先用filter或find筛选目标项。

React场景实现代码 #

// 在组件的return中渲染
{cloudData.map(dataCenter => (
  <div key={dataCenter.dataCenter} className="grid-group">
    {/* 转换数据中心名称格式 */}
    <div className="dc-title">{dataCenter.dataCenter.replace('-', ' ')}</div>
    {/* 遍历渲染频道 */}
    {dataCenter.availablechannels.map(channel => (
      <div key={channel.id} className="channel-item">{channel.channelName}</div>
    ))}
  </div>
))}

纯JS DOM插入实现代码 #

function renderCloudGrid() {
  const gridContainer = document.getElementById('cloud-grid');
  const gridHtml = cloudData.map(dataCenter => {
    // 生成数据中心标题行
    const dcTitle = `<div class="dc-title">${dataCenter.dataCenter.replace('-', ' ')}</div>`;
    // 生成所有频道行
    const channelRows = dataCenter.availablechannels.map(channel => 
      `<div class="channel-item">${channel.channelName}</div>`
    ).join('');
    return `<div class="dc-group">${dcTitle}${channelRows}</div>`;
  }).join('');
  
  gridContainer.innerHTML = gridHtml;
}

// 调用渲染函数
renderCloudGrid();

仅展示特定数据中心（如AWS-East） #

如果只需要渲染指定数据中心的内容，先用find筛选目标项：

const targetDC = cloudData.find(item => item.dataCenter === 'AWS-East');

if (targetDC) {
  return (
    <div>
      <div>{targetDC.dataCenter.replace('-', ' ')}</div>
      {targetDC.availablechannels.map(channel => (
        <div key={channel.id}>{channel.channelName}</div>
      ))}
    </div>
  );
}

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