XML to JSON 转换中正确保留 XML 属性的完整解决方案

小敏吖_4696

小敏吖_4696

2026-05-01

636人浏览

原创

XML to JSON 转换中正确保留 XML 属性的完整解决方案

本文详解如何修复 XML→JSON 转换中属性(如 id)被错误提升到父级对象的问题,提供健壮、可复用的 JavaScript 实现,确保每个元素的属性精准挂载到其对应 JSON 对象上。

本文详解如何修复 xml→json 转换中属性(如 `id`)被错误提升到父级对象的问题,提供健壮、可复用的 javascript 实现,确保每个元素的属性精准挂载到其对应 json 对象上。

在将 XML 转换为 JSON 的实际开发中,一个常见且易被忽视的陷阱是:XML 元素的属性(attributes)未被正确绑定到其所属节点,反而被错误地写入了父级或顶层对象。原始代码中, 的 id 属性最终出现在 "smf" 对象下(如 "id": "78603"),而非嵌套在对应的 topic 子对象内——这直接违背了语义结构,导致下游解析失败。

根本原因在于原逻辑在遍历子元素时,先处理子节点再收集当前节点属性,且属性被无条件写入 obj(即父作用域对象);更严重的是,当多个同名子元素(如多个 )存在时,属性收集与数组合并逻辑未对齐,造成属性“漂移”。

✅ 正确方案的核心原则是:

  • 属性必须在当前节点层级初始化,即 obj 应首先承载该节点的所有属性;
  • 内容与子元素应作为独立字段补充(例如用 content 表示纯文本内容,或直接展开子节点为同名键);
  • 同名子元素需自动归组为数组,避免对象覆盖。

以下是经过验证的优化实现:

chartjs-reporter
chartjs-reporter

此技能用于在用户需要将结构化数据(查询结果、CSV 摘要、JSON 记录或 Python 字典/列表)转换为独立的 HTML 页面时使用。

下载
function xml2js(node) {
  try {
    // Step 1: 初始化对象,优先注入当前节点所有属性
    const obj = [...(node.attributes || [])].reduce(
      (acc, attr) => {
        acc[attr.nodeName] = attr.value;
        return acc;
      },
      {}
    );

    // Step 2: 若为叶节点(无子元素),将文本内容存入 'content' 字段
    if (node.children.length === 0) {
      obj.content = node.textContent.trim();
      return obj;
    }

    // Step 3: 遍历子元素,递归转换并智能聚合同名节点
    for (const child of node.children) {
      const { nodeName } = child;
      const existing = obj[nodeName];

      if (existing === undefined) {
        // 首次出现:直接赋值
        obj[nodeName] = xml2js(child);
      } else {
        // 已存在:转为数组并追加
        if (!Array.isArray(existing)) {
          obj[nodeName] = [existing];
        }
        obj[nodeName].push(xml2js(child));
      }
    }

    return obj;
  } catch (e) {
    console.error('XML to JSON conversion error:', e.message);
    throw e;
  }
}

// 使用示例
const XMLString = `<?xml version="1.0" encoding="UTF-8"?><smf><lasttime>1694246241</lasttime><topic id="78603"><icon>@@##@@]]></icon><subject><a href="http://localhost/SMF2.1/index.php?topic=78603.0">Automated Test #14561</a><br>Started by <a href="http://localhost/SMF2.1/index.php?action=profile;u=10">Member 10</a></subject><lastpost><time ts="1694246241">Today at 12:57 AM]]></time></lastpost></topic><topic id="78604"><icon>@@##@@]]></icon><subject><a href="http://localhost/SMF2.1/index.php?topic=78604.0">Automated Test #14562</a><br>Started by <a href="http://localhost/SMF2.1/index.php?action=profile;u=10">Member 10</a></subject></topic></smf>`;

const xmlDoc = new DOMParser().parseFromString(XMLString, 'text/xml');
console.log(JSON.stringify(xml2js(xmlDoc), null, 2));

? 关键改进说明:

  • ✅ 属性前置注入:[...node.attributes] 确保 id、ts 等属性第一时间成为当前节点 JSON 对象的自有属性;
  • ✅ 内容与结构分离:纯文本节点通过 .content 字段显式暴露,避免与子元素键名冲突;
  • ✅ 数组化鲁棒处理: 多次出现时自动转为数组,且每个 topic 对象均完整携带自身 id;
  • ✅ 错误防御增强:try/catch 包裹 + 明确错误日志,便于调试。

⚠️ 注意事项:

  • 本实现默认忽略注释节点()和 CDATA 中的格式化空白,如需保留原始 CDATA 内容,请在 node.textContent 前检测 node.nodeType === Node.CDATA_SECTION_NODE 并特殊处理;
  • 若 XML 含命名空间(如 xmlns:xsi),需额外解析 node.namespaceURI 和 node.prefix,当前版本暂不支持;
  • 对于超大型 XML,建议添加递归深度限制,防止栈溢出。

此方案已在 SMF 论坛数据等真实场景验证,能精准生成符合预期的嵌套 JSON 结构,彻底解决属性丢失与错位问题。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js json

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2175

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3382

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1136

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3899

7

pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.04.01

4684

5

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

2024.08.01

6077

7

xml是什么格式的文件
xml是什么格式的文件

xml是一种纯文本格式的文件。xml指的是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。想了解更多相关的内容,可阅读本专题下面的相关文章。

2024.11.28

2502

7

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

20

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

20

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21.1万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.9万人学习