实现页面查看xml或json数据类似控制台效果

在前端查看xml或者json数据时，实现在类似与控制台中console的效果。

配合Ant Design的Collapse折叠面板进行展示。

Collapse组件的地址：https://ant.design/components/collapse-cn/

 

 

效果图:

 

 

 

简单的说下思路：

xml或者json数据一般是比较有规律的，经常是节点套节点这种。

配合Collaspe组件，将每个节点名，每个节点值给展示出来。

实现方法就是递归。

如果是字符串形式，先将xml或者json类型的字符串转换成相应对象。

从根节点开始，每次递归返回的就是子节点而已，然后在每次递归中将组件套入其中。

 

上代码：

 

// 这部分是主要代码，即递归部分// 入参为xml对象
XmlCollapse= (xml) => {　　// 获取子节点
    const nodes = xml.childNodes;　　// 遍历子节点
    const nodesAll = Object.keys(nodes).map(j=>{　　　　
     // nodeType == 3时，节点是Text类型 直接显示节点名：节点值
      if(nodes[j].hasChildNodes()&&nodes[j].childNodes[0].nodeType!=3) {
        let header='';
        // 属性
        if(nodes[j].attributes&&nodes[j].attributes.length>0){　
        // 遍历属性
          Object.keys(nodes[j].attributes).map(t=>{
            header += ' ' + nodes[j].attributes[t].nodeName + '=' + nodes[j].attributes[t].nodeValue;
          });
        }// 返回的是子节点
        return (
          <Panel header={nodes[j].tagName + header} key={j}> 
            {this.XmlCollapse(nodes[j])}
          </Panel>
        )
      }else{
        return (
          <React.Fragment key={j}><div>{nodes[j].tagName}:{nodes[j].textContent}</div></React.Fragment>
        );
      }
    });
    return (<Collapse>{nodesAll}</Collapse>);
  }

 

总结一下:

博文写的比较少，思路交代的不是很清晰，主要靠理解吧。

有时候写个迭代会把自己卡个好几小时，主要是代码写的太少了。

在这里记录一下写过的代码，同时激励自己多敲代码。

如果有帮助到你，不用客气哦~