Parse XML from an API in Nuxt using XML2JS

Question

I'm trying to Loop through the API in nuxt using XML2JS and then looping through the data to display it within an html file.

It's working when console logged but it's not looping through within the HTML. There arent any errors its, just blank and not displaying anything in the html.

    <template>
  <article>

<TheHeader />

    <h1>Destinations</h1>

  <main class="mt-8 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-20 xl:mt-24">


<section v-for="(mountain, index) in mountains" :key="index">

<div v-for="category in mountain.property" :key="category.id">


      <div class="lg:grid lg:grid-cols-12 lg:gap-8 mt-12">
        <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
          <h2 class="mt-1 text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-6xl">
            {{ category.propertyname }}
          </h2>
          <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
            {{ category.propertyaddress }}
          </p>
        </div>
        <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
          <div class="relative mx-auto w-full rounded-lg shadow-lg">
            <button type="button" class="relative block w-full rounded-lg overflow-hidden focus:outline-none focus:shadow-outline">
              <img class="w-full" :src="category.photos.img.main._url" :alt="category.photos.img.caption">
              <div class="absolute inset-0 w-full h-full flex items-center justify-center">
              </div>
            </button>
          </div>
        </div>
      </div>

</div>
</section>

    </main>

  </article>
</template>

<script>


const xml2js = require('xml2js');

  export default {
    data() {
      return {
        mountains: []
      }
    },

    async fetch() {
      this.mountains = await fetch('http://localhost:3000/api/')
      .then( res => res.text() )
      .then( data=> {

          const xml = data;

          xml2js.parseString(xml, (err, result) => {
              if(err) {
                  throw err;
              }

              const output = JSON.stringify(result, null, 4);

              console.log(output);
          });

      })
    }

  }
</script>

JSON:

{
"scdata": {
    "property": [
        {
            "propertycode": "123456"

Any help would be much appreciated, please let me know if you need me to provide any more information.

Thanks.

Answer 1

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>