vue如何解析xml文件 x2js
好久没来写东西了,主要是一直在加班,哼哼,不开心
项目中会用到将xml文件解析成json文件在页面中显示出来,以前jq的时候用到的方法行不通了,故在这边介绍一种我觉得还不错的插件
1. npm安装
npm i x2js
2.在main.js中引用
import x2js from 'x2js' //xml数据处理插件
Vue.prototype.$x2js = new x2js() //创建x2js对象,挂到vue原型上
3.在组件中使用
_getVersion(url) {
this.loading = true;
let _self = this;
this.$ajax.get(`/data/version${url}.xml`).then(function(res) {
_self.loading = false;
console.log(res.data);
/* var x2js = new X2JS();*/
/* var obj = x2js.xml_str2json(res.data).note;*/
var jsonObj = _self.$x2js.xml2js(res.data);
console.log("-----");
console.log(jsonObj.note);
_self.tableData = jsonObj.note.specialityList.item;
_self.changeData = jsonObj.note.changeList.item;
_self.finishData = jsonObj.note.finishedPunchList.item;
_self.knownData = jsonObj.note.questionList.item;
_self.versionDes = jsonObj.note.name;
_self.versionDate = jsonObj.note.date; })
.catch(function(err) {
console.log(err)
_self.loading = false;
});
}
注意:你的xml文件如果是放在前端这边的话,要把文件放到public文件夹当中,否则文件将会报404的错
vue如何解析xml文件 x2js的更多相关文章
- Android 解析XML文件和生成XML文件
解析XML文件 public static void initXML(Context context) { //can't create in /data/media/0 because permis ...
- JAVA使用SAX解析XML文件
在我的另一篇文章(http://www.cnblogs.com/anivia/p/5849712.html)中,通过一个例子介绍了使用DOM来解析XML文件,那么本篇文章通过相同的XML文件介绍如何使 ...
- JAVA中使用DOM解析XML文件
XML是一种方便快捷高效的数据保存传输的格式,在JSON广泛使用之前,XML是服务器和客户端之间数据传输的主要方式.因此,需要使用各种方式,解析服务器传送过来的信息,以供使用者查看. JAVA作为一种 ...
- java中采用dom4j解析xml文件
一.前言 在最近的开发中用到了dom4j来解析xml文件,以前听说过来解析xml文件的几种标准方式:但是从来的没有应用过来,所以可以在google中搜索dmo4j解析xml文件的方式,学习一下dom4 ...
- XML:使用DOM技术解析xML文件中的城市,实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- dom4j如何解析XML文件
最近在 一些对xml文件的操作,下面简单写一个dom4j解析xml文件并将其封装到一个javabean中的例子,只是具有针对性的,不是通用的,仅供参考哦~~ 首先说:dom4j是一个java的XML ...
- java解析XML文件
dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点,同时它也是一个开放源 ...
- Android开发学习---使用XmlPullParser解析xml文件
Android中解析XML的方式主要有三种:sax,dom和pull关于其内容可参考:http://blog.csdn.net/liuhe688/article/details/6415593 本文将 ...
- SAX解析xml文件
需要做一个银行名字的列表. 因为有很多,所以想到了用xml来保存,然后uongDAX解析. public class BankSelectActivity extends BaseActivity{ ...
随机推荐
- day64_10_8 vue的导入
一.简介 vue是一个渐进式的js框架.具体介绍查看官网: https://cn.vuejs.org 在vue框架中,有两个文件,当在开发阶段时使用完整版vue,因为有报错信息,而在上市阶段可以使用m ...
- 4.web基础$_POST
- MongoDB图形化工具(三)
一.安装 下载地址:https://www.mongodbmanager.com/download 注意:在下载的时候需要对应上自己安装的mongodb版本. 双击安装 选择“Full install ...
- 短信控制的 智能插头(sim900a arduino uno)
https://www.arduino.cn/thread-19432-1-2.html 1.所需工具:(1)arduino UNO,(2)sim900a模块,(3)单路继电器,(4)220v ac转 ...
- hw笔试题-02
#include<stdio.h> #include<string.h> typedef struct { char *mem; char len; }m_table_t; i ...
- MongoDB自学------(2)创建删除数据库及集合
一.创建数据库 二.查看所有数据库 三.删除数据库 四.创建集合 五.删除集合 六.集合用法介绍 1.创建集合 2.删除集合 下一篇链接:https://www.cnblogs.com/LinHuCh ...
- Linux查找文件夹下包含某字符的所有文件
Linux grep 命令用于查找文件里符合条件的字符串.grep 指令用于查找内容包含指定的范本样式的文件,如果发现某文件的内容符合所指定的范本样式,预设 grep 指令会把含有范本样式的那一列显示 ...
- python yield from (二)
#pep380 #1. RESULT = yield from EXPR可以简化成下面这样 #一些说明 """ _i:子生成器,同时也是一个迭代器 _y:子生成器生产的值 ...
- .net core EF Core 调用存储过程
在这里,我们将尝试去学习一下 .net core EF Core 中调用存储过程. 我们知道,EF Core 是不支持直接调用存储过程的,那它又提供了什么样的方式去执行存储过程呢?有如下方法: 1.F ...
- 基于直接缓冲区和非直接缓冲区的javaIO文件操作
基本概念: 1. 非直接缓冲区: 指的是通过jvm来缓存数据的,应用程序要读取本地数据要经历从本地磁盘到物理内存,然后copy到jvm中,然后再通过流的方式读取到应用程序中,写的操作正好与之相反. ...