I converted an excel spreadsheet to a JSON object using xml2js parseString() and then used JSON.stringify on the result.
I have reviewed that data in the console and can see the data in a form that looks like I should be able to easily iterate through it to display the fields of interest.
However, I have tried many forms of v-for to iterate through the file, "Cell" by "Cell".
Any direction towards a solution is greatly appreciated.
here is my code.
<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>
The console.log displays the following:
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"
]
}
]
}
]
}
}
Here is what I see in console log if I look at the object before 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".
