[Vuejs]-Parse XML from an API in Nuxt using XML2JS

by

0👍

I guess you are not returning any data to the mountains. Might be possible that’s why you didn’t get any display at visual while you got data in const output

So, Please try with the replace the fetch function with below

<template>
<div class="container">
  <h1>Test demo of xml parse</h1>
  <div v-for="(category, index) in mountains" :key="index">
    <div class="property-name"> <h3>Property Code:</h3><span>category.propertycode</span>
    </div>
  </div>
</div>
</template>

<script>
const xml2js = require('xml2js');
export default {
  data() {
    return {
      mountains: []
    }
  },
  methods: {
    xmlToJSON: (str, options) => {
      return new Promise((resolve, reject) => {
        xml2js.parseString(str, options, (err, jsonObj) => {
          if (err) {
            return reject(err);
          }
          resolve(jsonObj);
        });
      });
    }
  },
  async fetch() {
    const xmlData = await fetch('<YOUR-API-URL>')
      .then(res => res.text())
      .then(data => {
        console.log('<<==');
        const xml = data;
        return data;
      });
    const jsonData = await this.xmlToJSON(xmlData);
    if (jsonData && jsonData.scdata && jsonData.scdata.property) this.mountains = jsonData.scdata.property
  }
}
</script>

Leave a comment