Having trouble retrieving data from a JSON object that has been stringified. This issue is arising in my project that utilizes Quasar

I successfully converted an excel spreadsheet into a JSON object by using the xml2js parseString() method, followed by JSON.stringify to format the result.

After reviewing the data in the console, it appears that I should be able to easily iterate through it to display the fields of interest.

Despite my efforts, I have encountered difficulties in iterating through the file, "Cell" by "Cell" using various forms of v-for.

Any guidance or direction towards a solution would be greatly appreciated.

Below is the code snippet:

<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 output displays the following:

json: {
    "Table": {
        "Row": [
            ...
            ]
        }
    }
}

Upon examining the object before JSON.stringify, I can see the desired data but struggle with accessing it. Here is what appears in the console log without stringify:

When I console.log the result before stringify, I am able to see the data I need but face challenges in extracting 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"

This helps me identify that the target data I'm looking for is within the "CHAPTER" field.

Answer №1

Appreciate the guidance, deceze. Your direction was spot on!

I decided to stringify the xml2js object, and although I may have added an unnecessary step, here is the code that successfully fetched me "CHAPTER", among other things.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue 2 enhanced with vue-cli, vue-property-decorator, and vue-class-component, featuring the elegant Vuetify design system, undergoing a seamless migration to the latest

I have undertaken a project to upgrade from Vue 2 to Vue 3. Following the Vue migration documents, the codebase has been updated: https://v3-migration.vuejs.org/breaking-changes/introduction.html#overview. There seems to be a mismatch with the libraries me ...

observe, don't upgrade modify vue

I am attempting to modify a variable by watching and updating it in HTML <p>{{customer.creditsLeft}}</p> using Vue.js data() { customer: {}, } watch: { '$store.state.jobs.listBooking.customer': function (newVal) { this.cust ...

Create your own unique Semantic UI themes using the Semantic UI theme builder, complete with support for Font Awesome classnames and the ability to preview them with the

My admiration for Semantic UI and Semantic UI React knows no bounds. Not only are they phenomenal libraries, but their documentation is truly a work of art. Yet, crafting and keeping up with themes for these components can be quite the challenge. The task ...

Modifying the background hue of the element-ui tooltip

I am currently working with vue.js version 2.6.10 and element-ui version 2.15.1. The element-ui component I am using is as follows: <el-tooltip content="Top center" placement="top"> <span>Dark</span> ...

Using jQuery and regex to validate a long string containing lowercase letters, uppercase letters, numbers, special characters, and

Good day, I've been struggling with jquery regex and could really use some assistance. I've been stuck on this since last night and finally decided to seek help :) Here is my regex code along with the string stored in the 'exg' variabl ...

Reading small JSON files from android assets experiences a significant lag

Currently, I am developing a straightforward Android application in Kotlin that will display categorized prayers to the user. In the assets folder, there are 5 JSON files, each approximately 10 KiB in size. For parsing these JSON files, I am utilizing Kla ...

I seem to be overlooking something. The calculation is not displaying in the designated field

Having trouble with my area calculator - the area field is not updating as expected when I enter numbers in each field. Any advice on what might be missing? function calculateArea() { var form = document.getElementById("calc"); var sLength = parseFl ...

Deciphering JSON data in the Swift 2 language

I am currently delving into the world of Swift and working on a project that involves extracting and displaying JSON output from an API. For reference, here is the documentation for the API I am using: API Documentation Below is the code snippet I have b ...

Tips for wiping clean and restarting data in a modal?

After closing and reopening this modal, both the old information and new data remain. I aim to reset everything within the modal, wiping out details from both the header and body. Expected scenario - Actual situation - Code- .html.erb file <div cla ...

Modifying the data attribute within the div does not result in a different image for the 360-degree spin view

My current project involves utilizing js-cloudimage-360-view.min.js to create a 360-degree view of images. I have successfully retrieved the images, but I am encountering difficulty in updating the images by clicking a button. index.html <!DOCTYPE html ...

Closing the React Material UI drawer with nested list items upon clickingORClicking on nested list

Currently, I am encountering an issue with my React project that utilizes Material-UI. The problem arises when I incorporate nested list items within the drawer component. Previously, everything was functioning smoothly until the addition of these nested i ...

How to Serialize a Dictionary in C# Without Using the "key" and "value" Keywords

I am having difficulty serializing the data structure shown below into JSON: public class TestClass { public TestClass() { Translations = new List<Dictionary<string, Dictionary<string, string>>>(); } [JsonProp ...

Alter the dimensions and material displayed on Vue

In my Vue.js project, I have a topbar with two divs whose size and content need to be adjusted based on whether the user is logged in. If they are not logged in, it should look like this: <div id='search' width="400px"></div><div ...

Exploring the data nesting structure in Grails and mongo DB

I am working on a Grails project that involves interacting with mongo DB. I am seeking advice on the best approach for creating domain classes to represent nested data. Here is an example of the data: settings:{ user:{id:1234 , name:"john"} colors:{h ...

Express 4 Alert: Headers cannot be modified once they have been sent

I recently upgraded to version 4 of Express while setting up a basic chat system. However, I encountered an error message that says: info - socket.io started Express server listening on port 3000 GET / 304 790.443 ms - - Error: Can't set headers ...

A div containing a form, with the form being visually integrated within the div

Hi everyone, this is my first post here and I've tried to search extensively before asking this question. I've attempted to use the following examples without success: jquery submit form and then show results in an existing div Form submit ...

How can I use regular expressions to validate one-letter domain names?

I am in the process of developing a validation rule for my C# MVC Model using Regex. [RegularExpression(@"(\w[-._+\w]*\w@\w{1,}.\w{2,3})", ErrorMessage = "* Email Address: Please enter a valid Email Address.")] public virtual stri ...

What is the best way to extract the singular PDF link from a webpage?

Currently, I am attempting to utilize Selenium in Java to access DOM elements. However, I have encountered an issue while testing the code: Exception in thread "main" org.openqa.selenium.StaleElementReferenceException: stale element reference: element is n ...

Vue js is throwing an error message that says "Reading 'push' property of undefined is not possible"

I've encountered an issue while trying to navigate to other routes. The error I'm receiving is: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') at eval (JoinRoom.vue?bd9d:74:1) This is how I pu ...

Creating a separation between Mongoose data access code and pure data objects in Node.JS using Object-Oriented Programming

I've stumbled upon a design dilemma regarding Mongoose - could it be that my approach is off? In the traditional OOP fashion, I aim to create a User class. This class includes various attributes such as username, firstname, lastname, salt, and hash, ...