解析大型JSON后分离key/value pairs以实现样式定制的技术咨询

嘿，我完全懂你的需求——现在能批量输出JSON的键值对，但没法单独对每个条目做样式或者放进表格里，对吧？下面给你一套具体的实现方案，不管你用的是React还是普通JS，都能轻松把键值对拆分开，灵活定制展示效果。

首先我们需要把嵌套的JSON对象（如果有的话）扁平化，转成包含key和value的数组，这样后续渲染时就能逐个处理每个条目。这里写个递归函数来处理嵌套结构：

// 假设你的大型JSON数据是这个
const largeJsonData = {
  userInfo: {
    name: "RobiminusMaximus",
    age: 28,
    email: "rob@example.com"
  },
  accountSettings: {
    theme: "dark",
    notifications: true,
    storage: "5GB"
  },
  recentActivity: ["login", "upload", "comment"]
};

// 递归扁平化JSON，处理嵌套结构
function flattenJson(obj, parentKey = "") {
  let keyValueArray = [];
  
  for (const [currentKey, value] of Object.entries(obj)) {
    // 拼接父级键和当前键，比如userInfo.name
    const fullKey = parentKey ? `${parentKey}.${currentKey}` : currentKey;
    
    // 如果是嵌套对象且不是数组，继续递归
    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
      keyValueArray = keyValueArray.concat(flattenJson(value, fullKey));
    } else {
      // 普通值直接加入数组
      keyValueArray.push({ key: fullKey, value });
    }
  }
  
  return keyValueArray;
}

// 得到拆分后的键值对数组
const splitKeyValuePairs = flattenJson(largeJsonData);

现在你有了拆分好的数组，就能在return()里自由渲染成表格、卡片或者任何你想要的结构了，每个条目都能单独设置样式。

示例1：渲染成格式化表格 #

return (
  <div className="json-table-container">
    <h3>JSON解析结果</h3>
    <table className="key-value-table">
      <thead>
        <tr>
          <th className="table-header-key">键名</th>
          <th className="table-header-value">值</th>
        </tr>
      </thead>
      <tbody>
        {splitKeyValuePairs.map((pair, index) => (
          <tr 
            key={index} 
            className={index % 2 === 0 ? "table-row-even" : "table-row-odd"}
          >
            <td className="table-cell-key">{pair.key}</td>
            <td className="table-cell-value">
              {/* 可以根据值的类型做特殊处理，比如数组转成逗号分隔的字符串 */}
              {Array.isArray(pair.value) ? pair.value.join(", ") : pair.value}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

示例2：渲染成自定义卡片 #

如果想要更灵活的布局，比如响应式卡片：

return (
  <div className="key-value-cards">
    {splitKeyValuePairs.map((pair, index) => (
      <div key={index} className="kv-card">
        <span className="card-key">{pair.key}</span>
        <span className="card-value">
          {typeof pair.value === "boolean" ? (
            pair.value ? "✅ 开启" : "❌ 关闭"
          ) : Array.isArray(pair.value) ? (
            pair.value.map((item, idx) => <span key={idx} className="tag">{item}</span>)
          ) : (
            pair.value
          )}
        </span>
      </div>
    ))}
  </div>
);

现在你可以给每个元素加类名，自由定制样式：

/* 表格样式 */
.key-value-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.table-header-key, .table-header-value {
  background-color: #f1f5f9;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e2e8f0;
}

.table-row-even {
  background-color: #f8fafc;
}

.table-row-odd {
  background-color: #ffffff;
}

.table-cell-key {
  padding: 10px;
  font-family: monospace;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
}

.table-cell-value {
  padding: 10px;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
}

/* 卡片样式 */
.key-value-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 20px;
}

.kv-card {
  padding: 16px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-key {
  display: block;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.card-value {
  color: #1e293b;
}

.tag {
  display: inline-block;
  background-color: #e2e8f0;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 6px;
  font-size: 0.875rem;
}

这样处理后，每个键值对都是独立的DOM元素，你可以随便调整样式、添加交互，甚至根据值的类型做差异化展示（比如布尔值转开关图标、数组转标签）。

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