实现页面查看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>);
  }

 

总结一下:

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

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

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

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

 

转载于:https://www.cnblogs.com/lighter-jh/p/11018982.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: jQuery 提供了一个方法 `$.parseXML()`,用于将字符串形式的 XML 解析成 XML Document 对象。这样就可以使用 jQuery 的 DOM 操作方法来遍历解析出来的 XML 了。 举个例子: ``` $.ajax({ type: "GET", url: "data.xml", dataType: "xml", success: function(xml) { // 将 XML 解析为 XML Document 对象 var xmlDoc = $.parseXML(xml), $xml = $(xmlDoc); // 使用 jQuery 的 DOM 操作方法来遍历解析出来的 XML $xml.find("item").each(function() { var $this = $(this), item = {}; item.title = $this.find("title").text(); item.description = $this.find("description").text(); // 将解析出来的数据存入数组 items.push(item); }); } }); ``` 然后,就可以使用 `JSON.stringify()` 将遍历出来的数据转为 JSON 字符串了。 举个例子: ``` var jsonString = JSON.stringify(items); ``` 最后,就可以使用 `JSON.parse()` 将 JSON 字符串转为 JSON 对象了。 举个例子: ``` var items = JSON.parse(jsonString); ``` 这样就完成了将 XML 数据转为 JSON 数据的过程。 ### 回答2: 使用jQuery可以将XML数据转换为JSON数据。首先,我们需要获取XML数据并将其加载到一个变量中,然后使用jQuery的方法将其转换为JSON格式。以下是一个示例代码: ```javascript // 获取XML数据 var xmlData = '<root><name>John Doe</name><age>25</age><city>New York</city></root>'; // 将XML数据转换为JSON格式 var jsonData = $.xml2json(xmlData); // 输出转换后的JSON数据 console.log(jsonData); ``` 上述代码中,我们使用了一个虚拟的XML数据,你需要将其替换为实际的XML数据。然后,通过调用`$.xml2json`方法将XML数据转换为JSON格式,并将结果保存在`jsonData`变量中。最后,我们使用`console.log`方法输出转换后的JSON数据。 需要注意的是,jQuery本身不提供将XML转换为JSON的功能,我们可以使用第三方库`jquery.xml2json`来实现这个功能。你可以在引入`jquery.xml2json`插件后使用`$.xml2json`方法来实现XMLJSON的功能。 最后,值得一提的是,使用jQuery将XML转换为JSON的功能并不是一种常见的需求,因为XMLJSON具有不同的数据结构和用途。如果可能的话,推荐直接使用JSON格式数据,以避免进行额外的转换过程。 ### 回答3: 使用jQuery可以很方便地将XML数据转换为JSON数据。 首先,需要用`$.ajax`方法来读取XML文件。其中,`dataType`属性设置为`xml`,表示读取的数据XML格式。 然后,在`success`回调函数中,可以使用`$.parseXML`方法来解析XML数据,将其转换为一个DOM对象。 接下来,可以使用jQuery的选择器来获取XML中的各个节点,并将其转换为JSON格式。例如,可以使用`$(domObject).find`方法来获取XML中的节点,再使用`.each`方法遍历节点。 在遍历每个节点时,可以使用`node.nodeName`获取节点名称,`node.textContent`获取节点的文本内容,并将其组织成一个JSON对象。 最后,可以使用`JSON.stringify`方法将JSON对象转换为JSON字符串,并将其输出。 以下是一个示例代码: ```javascript $.ajax({ url: "data.xml", dataType: "xml", success: function(xml) { var json = []; $(xml).find('node').each(function() { var node = {}; node.name = $(this).attr('name'); node.content = $(this).text(); json.push(node); }); var jsonString = JSON.stringify(json); console.log(jsonString); } }); ``` 以上代码假设要转换的XML路径为"data.xml",XML中的节点名称为"node",节点属性名为"name",节点内容为文本。 使用这段代码,XML数据将会被转换为JSON数据,并输出到控制台中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值