Vue.js 使用XML2JS从Nuxt中的API解析XML

我尝试使用XML2JS在nuxt中循环使用API，然后循环使用数据在html文件中显示它

它在控制台登录时工作，但在HTML中没有循环。没有任何错误，只是空白，没有在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>

任何帮助将不胜感激，请让我知道如果你需要我提供任何更多的信息

---

谢谢。

我想你不会把任何数据返回山区。可能这就是为什么当您在常量输出中获取数据时，您在视觉上没有得到任何显示

因此，请尝试使用以下替换fetch函数

<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>

xml解析的测试演示
属性代码：category.propertycode
const xml2js=require（'xml2js'）；
导出默认值{
数据（）{
返回{
山脉：[]
}
},
方法：{
xmlToJSON：（str，options）=>{
返回新承诺（（解决、拒绝）=>{
parseString（str，options，（err，jsonObj）=>{
如果（错误）{
退货拒绝（err）；
}
解决（jsonObj）；
});
});
}
},
异步获取（）{
const xmlData=wait fetch（“”）
。然后（res=>res.text（））
。然后（数据=>{
log（'谢谢您的评论，这似乎仍然没有输出模板中的值供我访问。这有什么问题吗？{category.property}}{{category.propertyaddress}}我更新了代码，请检查此代码，事实上您在vueJs文件中的解析方式是错误的。请尝试使用上面的代码，它将显示propertyCode。您可以根据您的要求编写。这很好，如果您可以帮助，只需再问两个问题，当我使用{category.propertyname}{category.countryiso}时，它显示为[“伦敦眼”[“GB”]是否有办法删除文本周围的[“”]符号？当我使用：src=“category.photos.img.main.url”我得到TypeError:无法读取未定义的JSON图像的属性'main'->我发现您在解析数组时出错。请正确解析数组。如果您在数组中得到propertyname和countryiso，请使用循环的任意一次迭代，如果您想显示第一个元素，请使用类似：
category.propertyname[0]
&
category.countryiso[0]
&对于需要解析完整图像而不是直接用于图像的图像：src可能类似于：
category.photos[0]['img'][0]['main'][0]['url'][0]
。有关更多信息，请与我联系：
<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>