Manipulating XML text to display the user with javascript vuejs

Question

Hello, I have a text area that the user will insert the pasted XML text, to register an API. and after that I need to render to the user the xml formatted with the fields. is there any lib that helps in this task? or a simple way to do it?

Answer 1

You can use Domparser to make the XML interface. Since you’re using vuejs, you can do Binding field with v-model and then perform a function on methods to do the interpretation.

Example:

<div id="app">
  <textarea v-model="xml"></textarea>
  <button @click="parse">Parse</button>
</div>

<script>
  const app = new Vue({
    el: "#app",
    data: {
      xml: "",
    },
    methods: {
      parse() {
        let parser = new DOMParser();
        xmlDoc = parser.parseFromString(this.xml, 'text/xml');

        // Ler valores do XML
        let val1 = xmlDoc.getElementsByTagName("nome_do_campo_val1")[0].childNodes[0].nodeValue;
      }
    }
  })
</script>

You can see a few more examples here