#javascript #arrays #json #vue.js #xml2js
Вопрос:
Я преобразовал электронную таблицу excel в объект JSON с помощью xml2js parseString (), а затем использовал JSON.stringify в результате.
Я просмотрел эти данные в консоли и могу видеть данные в форме, которая выглядит так, как будто я должен иметь возможность легко перебирать их, чтобы отобразить интересующие поля.
Тем не менее, я перепробовал множество форм v-for для перебора файла, «Ячейка» за «Ячейкой».
Мы высоко ценим любое направление в направлении решения.
вот мой код.
<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>
Консоль.в журнале отображается следующее:
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/.nnIn 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.nnIn other lessons we combine the sounds you know to form many words that you will learn how to pronounce properly.nnThis 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:nn- |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"nnThe most frequently used pause filler when people are thinking about what to say is "uh".nnWatch 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.nnWatch 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".
Комментарии:
1. Пропустите
JSON.stringify…!? Это делает его строкой , к которой вы не можете получить доступ, как к объекту.
Ответ №1:
Спасибо, декиз, ты заставил меня посмотреть в правильном направлении.
Я построил объект xml2js, и, возможно, я добавляю дополнительный шаг, но вот мой код, который дал мне «ГЛАВУ» и т. Д.
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)
}