javascript - 无法访问 JSON 对象中的字段（字符串化），我正在使用 Quasar / vue.js
问题描述
我使用 xml2js parseString() 将 Excel 电子表格转换为 JSON 对象，然后在结果上使用 JSON.stringify。
我已经在控制台中查看了该数据，并且可以以一种看起来我应该能够轻松地遍历它以显示感兴趣的字段的形式查看数据。
但是，我尝试了多种形式的 v-for 来遍历文件，“Cell”通过“Cell”。
非常感谢任何解决方案的方向。
这是我的代码。
<template>
<q-page class="flex flex-center">
<div>
<div v-for="(jsonObject, i) in json" :key="i">
{{ jsonObject }}
</div>
</div>
</q-page>
</template>
<script>
import { parseString } from 'xml2js'
// import xml2js from 'xml2js'
export default {
name: 'PageIndex',
data() {
return {
xmlObj: [],
jsonObj: [],
json: []
}
},
methods: {
convertXmltoJs() {
this.$axios(`saundz_curriculum.xml`).then(response => {
// console.log('response.data:', response.data)
parseString(response.data, (err, result) => {
if(err) {
console.log('err:', err)
} else {
this.jsonObj = result
// JSON object with XML data
// console.log('jsonObj:', this.jsonObj)
// stringify JSON object
this.json = JSON.stringify(result, null, 4);
// log JSON object stringified
console.log('json:', this.json)
}
})
})
}
}
}
</script>
console.log 显示以下内容：
json: {
"Table": {
"Row": [
{
"Cell": [
{
"Data": [
"CHAPTER"
]
},
{
"Data": [
"LESSON NUMBER"
]
},
{
"Data": [
"LESSON TITLE"
]
},
{
"Data": [
"EXPLANATION"
]
},
{
"Data": [
"NEW PHONEMES"
]
},
{
"Data": [
"PHONEMES SO FAR"
]
},
{
"Data": [
"LESSON CONTENT"
]
},
{
"Data": [
"LESSON CONTENT \n(with syllablization)"
]
},
{
"Data": [
"PHONEME CONTENT"
]
},
{
"Data": [
"PHONEME CONTENT WITH SYNTAX"
]
},
{
"Data": [
"VPA"
]
}
]
},
{
"Cell": [
{
"Data": [
"Learn: vowel /ah/"
]
},
{
"Data": [
"1"
]
},
"",
{
"Data": [
"Welcome to Saundz, Chapter 1 of 37 Chapters. In this chapter you will learn the vowel sound /ah/.\n\nIn certain lessons you are introduced to a new vowel or consonant sound. When introduced to a new sound, you will learn the various ways that sound is written in American English.\n\nIn other lessons we combine the sounds you know to form many words that you will learn how to pronounce properly.\n\nThis is the Saundz building block approach to learning American English pronunciation."
]
},
"",
"",
"",
"",
"",
"",
""
]
},
{
"Cell": [
"",
{
"Data": [
"1.1000000000000001"
]
},
{
"Data": [
"Vowel /ah/"
]
},
{
"Data": [
"The vowel sound /ah/ is written in English as:\n\n- |uh| as in \"uh!\" and \"huh\"\n- |a| as in \"what\" and \"was\"\n- |u| as in \"fund\" and \"cut\"\n- |o| as in \"loved\" and \"ton\"\n\nThe most frequently used pause filler when people are thinking about what to say is \"uh\".\n\nWatch Simone to learn how to properly pronounce this vowel sound."
]
},
{
"Data": [
"ah (ᴧ)"
]
},
{
"Data": [
"ah (ᴧ)"
]
},
{
"Data": [
"HUH, WHAT, FUND, LOVED"
]
},
{
"Data": [
"H~UH, WH~A~T, F~U~N~D, L~O~VE~D"
]
},
{
"Data": [
"hh, ah | w, ah, t | f, ah, n, d | l, ah, v, d"
]
},
{
"Data": [
"#hh, ah | #w, ah, #t | #f, ah, #n, #d | #l, ah, #v, #d"
]
},
{
"Data": [
"To make the vowel sound /ah/:\n- Open mouth slightly, keeping lips and tongue relaxed.\n- Flatten tongue, placing tongue tip behind lower front teeth.\n- Pull tongue back, raising rear of tongue slightly.\n- Release air to make the vowel sound /ah/.\n- Place hand on throat, throat will vibrate lightly."
]
}
]
},
{
"Cell": [
"",
{
"Data": [
"38.1"
]
},
{
"Data": [
"Twelfths and Prompts"
]
},
{
"Data": [
"Let's practice some final four-consonant group words where one or two of the consonant sounds are often dropped.\n\nWatch Simone to learn how to properly pronounce these words."
]
},
"",
{
"Data": [
"ah (ᴧ), p (p), t (t), k (k), uh (ʊ), ih (ɪ), eh (ɛ), ae (æ), f (f), th (θ), hh (h), b (b), d (d), g (g), uw (u), iy (i), er (ɝ), v (v), dh (ð), s (s), z (z), sh (ʃ), zh (ʒ), aa (ɑ), ao (ɔ), r (r), l (ɫ), m (m), n (n), ng (ŋ), w (w), y (j), ch (tʃ), jh (dʒ), ey (eɪ), oy (ɔɪ), ay (aɪ), ow (oʊ), aw (aʊ), ax (ə)"
]
},
{
"Data": [
"TWELFTHS, PROMPTS"
]
},
{
"Data": [
"T~W~E~L~F~TH~S, P~R~O~M~P~T~S"
]
},
{
"Data": [
"t, w, eh, l, f, th, s | p, r, aa, m, p, t, s"
]
},
{
"Data": [
"t, w, eh, l, f, th, s | p, r, aa, m, p, t, s"
]
}
]
}
]
}
}
如果我查看 JSON.stringify 之前的对象，这就是我在控制台日志中看到的内容
When I console.log the result before stringify I can see the data I want but I am not sure how to access it.
jsonObj:
-- (obj: Observer)
......Table: Object
........Row: Array (5)
..........0:
............Cell: (...)
.............__ob__: Observer
...............dep: Dep {id: 2260, subs: Array(0)}
................value:
..................Cell: Array(11)
.....................0:
.......................Data: Array(1)
.........................0: "CHAPTER"
And that is what I want to get at, the "CHAPTER".
解决方案
谢谢你deceze，你让我找到了正确的方向。
我确实对 xml2js 对象进行了字符串化，也许我正在添加一个额外的步骤，但这是我的代码，它让我得到了“CHAPTER”等。
convertXmltoJSON() {
this.$axios(`saundz_curriculum.xml`).then(response => {
parseString(response.data, (err, result) => {
if(err) {
console.log('err:', err)
} else {
this.stringifyJSON(result)
}
})
})
},
stringifyJSON(result) {
const jsonParse = JSON.parse(JSON.stringify(result))
console.log('jsonParse.row:', jsonParse.Table.Row[0].Cell[0].Data)
}
推荐阅读
- python - 如何在 Python 中使用带有 TkInter 的键盘绑定来更改组合框值/索引？
- javascript - 了解不同的拖放参数？
- angular - IIS 子应用程序中未加载防伪令牌
- python - 如何将此字符串从此 Base64 转换为 img .jpg？
- android-source - AOSP 为 aosp_x86_64-eng 同时构建 x86 和 x64
- ruby-on-rails - 使用 tty-command gem 将密码写入控制台
- javascript - 如何使用多个同名的类来使用相同的 JS 函数？
- python - 获得两个大型阵列的线性组合的快速方法是什么？
- c# - 什么是 Windows 剪贴板 CF_ 格式，如 -16230、-15835、-15834 等？
- javascript - 如何使用 Lodash 在 Typescript 中展平我的示例对象？