X2JS

https://github.com/abdmob/x2js

by allen Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<body>
  <h1>X2JS Demo</h1>
  <div id="app">
    <button v-on:click="convertXml2JSon">XML => JSON</button>
    <button v-on:click="convertJSon2XML">JSON => XML</button>
    <div>
      <h4>source:</h4>
      <label><input type="checkbox" v-model="sourceShow">是否開啟</label>
      <pre v-if="sourceShow">
        {{ sourceXmlStr}}
      </pre>
    </div>
    <div>
      <h4>XML:</h4>
      <label><input type="checkbox" v-model="xmlShow">是否開啟</label>
      <pre v-if="xmlShow">
        {{ xmlResult | json }}
      </pre>
    </div>
    <div>
      <h4>JSON:</h4>
      <label><input type="checkbox" v-model="jsonShow">是否開啟</label>
      <pre v-if="jsonShow">
        {{ jsonResult | json }}
      </pre>
    </div>
  </div>

</body>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    sourceXmlStr: '',
    sourceShow: false,
    xmlShow: true,
    jsonShow: true,
    jsonResult: null,
    xmlResult: null,
    x2js: null
  },
  created: function() {
    this.x2js = new X2JS();
    this.getXmlSource();
  },
  methods: {
    getXmlSource: function() {
      var me = this;
      axios.get('https://shunnien.github.io/Victoria/ty_bike_lane.kml')
        .then(function(response) {
          me.sourceXmlStr = response.data;
        }).catch(function(response) {
          console.log(response);
        });
    },
    convertXml2JSon: function() {
      var me = this;
      me.jsonResult = me.x2js.xml_str2json(me.sourceXmlStr);
    },
    convertJSon2XML: function() {
      var me = this;
      me.xmlResult = me.x2js.json2xml_str(me.jsonResult);
    }
  }
})