如何在应用UI中以列形式展示API返回的动态JSON错误信息

问题描述 #

我从API收到如下JSON数据，其中的键和值会随错误发生情况动态变化，请问如何在应用UI中将其以列的形式展示？

键和值会随错误的发生而变化。

示例JSON数据（已翻译为中文）：

{"message":{"name":["姓名字段长度至少为5个字符。"],"mobile":["手机号格式无效。","手机号必须为数字。","手机号长度至少为11位。","手机号长度不能超过11位。"]}}

实现方案 #

核心逻辑统一为解析JSON错误数据 → 遍历字段与错误信息 → 构建列状UI，以下是不同技术场景的具体实现：

1. 原生JavaScript + HTML

直接操作DOM生成列布局：

<!-- 用于承载错误列的容器 -->
<div id="error-container"></div>

<script>
// 模拟API返回的错误数据
const errorResponse = {"message":{"name":["姓名字段长度至少为5个字符。"],"mobile":["手机号格式无效。","手机号必须为数字。","手机号长度至少为11位。","手机号长度不能超过11位。"]}};

const container = document.getElementById('error-container');
const errorFields = errorResponse.message;

// 遍历每个字段，生成对应列
for (const fieldName in errorFields) {
  // 创建列容器
  const column = document.createElement('div');
  column.style.display = 'inline-block';
  column.style.margin = '0 24px';
  column.style.verticalAlign = 'top';

  // 字段标题（可根据实际需求映射中文名称）
  const title = document.createElement('h4');
  title.textContent = fieldName === 'name' ? '姓名' : '手机号';
  column.appendChild(title);

  // 错误列表
  const errorList = document.createElement('ul');
  errorFields[fieldName].forEach(errorText => {
    const listItem = document.createElement('li');
    listItem.textContent = errorText;
    errorList.appendChild(listItem);
  });
  column.appendChild(errorList);

  container.appendChild(column);
}
</script>

2. Vue.js 实现

利用Vue的列表渲染快速生成列布局：

<template>
  <div class="error-columns">
    <div class="error-column" v-for="(errors, field) in errorData.message" :key="field">
      <h4>{{ fieldLabels[field] }}</h4>
      <ul>
        <li v-for="(error, idx) in errors" :key="idx">{{ error }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      errorData: {"message":{"name":["姓名字段长度至少为5个字符。"],"mobile":["手机号格式无效。","手机号必须为数字。","手机号长度至少为11位。","手机号长度不能超过11位。"]}},
      fieldLabels: {
        name: '姓名',
        mobile: '手机号'
        // 后续新增字段可在此扩展映射
      }
    };
  }
};
</script>

<style scoped>
.error-columns {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.error-column {
  flex: 0 0 auto;
}
</style>

3. React 实现

通过JSX遍历生成列组件：

import React from 'react';

const ErrorColumnView = () => {
  const errorData = {"message":{"name":["姓名字段长度至少为5个字符。"],"mobile":["手机号格式无效。","手机号必须为数字。","手机号长度至少为11位。","手机号长度不能超过11位。"]}};
  const fieldLabels = {
    name: '姓名',
    mobile: '手机号'
  };

  return (
    <div style={{ display: 'flex', gap: '32px', flexWrap: 'wrap' }}>
      {Object.entries(errorData.message).map(([field, errors]) => (
        <div key={field} style={{ flex: '0 0 auto' }}>
          <h4>{fieldLabels[field]}</h4>
          <ul>
            {errors.map((error, idx) => (
              <li key={idx}>{error}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default ErrorColumnView;

关键注意事项 #

• 字段名称映射：提前维护字段名与展示标签的映射表，方便后续新增字段时快速适配
• 响应式适配：可通过CSS媒体查询，在移动端将列布局切换为垂直堆叠，提升适配性
• 异常容错：添加JSON解析失败、message字段为空的判断逻辑，避免UI崩溃

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