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>
JSON:
{
"scdata": {
"property": [
{
"propertycode": "123456"
任何帮助将不胜感激,如果您需要我提供更多信息,请告诉我。
谢谢。
解决方案
我猜您没有将任何数据返回到山区。可能这就是为什么您在const 输出中获得数据时没有在视觉上获得任何显示的原因
所以,请尝试用下面的替换获取功能
<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>
推荐阅读
- angular - Angular 嵌套拖放 / CDK 材质 cdkDropListGroup cdkDropList nested
- css - 我可以将 webpack 配置为在我的顶级 index.html 中组合和缓存 bust css 文件吗?
- python - Matplotlib:获取轴的轴偏移文本
- javascript - node html-pdf 打印出额外的空白页
- android - Android 模拟器设备对于屏幕来说太大了
- javascript - 加载页面时如何填写 select2 (4.0) 中的所有数据?
- reactjs - React useContext第一次没有设置值
- python-3.x - 带有“无法加载配置:无法加载配置”的文件 .log VSCode
- python - 是否可以将 psycopg2 用于准备好的语句?
- featherlight.js - 在对话框中单击元素时,Featherlight 打开多个实例