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

AngularJS - the element of surprise in execution sequence

Encountering a puzzling issue that exclusively affects Internet Explorer (any version) and not Chrome. An "items" array is stored within the "doc" object. Users have the capability to edit items, which essentially deletes the item but retains its content ...

Having trouble with a tslint error in Typescript when creating a reducer

I encountered an error while working with a simple reducer in ngRx, specifically with the on() method. In addition, I came across some errors in the reducer_creator.d.ts file: Moreover, here are the versions of ngRx and TypeScript listed in my package.js ...

Discovering the largest value with arrays in javascript

My code is functioning as expected for single-digit numbers but encounters issues with two or three-digit numbers. I want to stick to this approach without utilizing the math max function. The primary issue lies in only considering the first digit of a tw ...

What is the reason that Object.keys(window) or for(k in window) does not include the Math object?

As I work on creating a JavaScript editor autocomplete feature, my goal is to showcase all available top-level elements. So far, I've experimented with: Object.keys(window) as well as for (k in window) However, it seems like neither method include ...

What is the best way to refresh a navigation bar after making an API request, such as when using Google Sign-In?

Struggling to grasp the hook concept in this particular scenario: The flow goes like this - the user logs in with Google, which updates the session state. Consequently, the visitorType state transitions from 'viewer' to 'buyside'... A ...

What is the best method for storing a text file in a NoSQL database? Which NoSQL platform is recommended for this task? And how can I seamlessly integrate it

What is the best way to efficiently store a text file in a NOSQL Database without compromising data integrity? Which NOSQL Database would be ideal for this task, and how can I integrate it with Flask using which library? ...

Efficiently accomplishing this task with jQuery

Below is a compilation of items along with their corresponding item hashes: 347366834 AceofSpades 460724140 TheJadeRabbit 814876685 TrinityGhoul 1345867570 SweetBusiness 1508896098 TheWardcliffCoil 1852863732 Wavesplitter 2044500762 TheQueenbreake ...

What is the process of decoding a URL in JavaScript?

Is there a better method to decode this URL in order to use it with JavaScript? URL: https://www.example.com/post.php?v=1&text=it's-me&20hello%0Aworld%0A At present, any occurrence of ' in the URL is causing an error and blank lines ar ...

I'm having some trouble with my jQuery.get() function in the javascript Saturday(), can anyone help me figure out what I'm doing wrong?

Can anyone help me troubleshoot my jQuery.get() method in the saturday() JavaScript function? Here is the code snippet I have been working on. This is what I have in my index.html file: <html> <head> <title>jVectorMap demo</title> ...

Implementing automatic loading of the Facebook SDK utilizing the PSR-4 standard

After installing the Facebook PHP SDK with composer, I discovered there is another composer.json file in the vendor/facebook directory. Do I need to execute this one as well? And now that the Facebook dependency is all set up, how do I start using it? Any ...

Unable to access frame: Error - Unable to retrieve 'add' property from undefined

I am working on customizing the chatbot functionality for my website built with Nuxt.js. I want the chatbot to display on certain pages while remaining hidden on others. Unfortunately, I encountered an issue when trying to hide it on specific pages. To im ...

Dealing with Regular Expressions in Javascript and PHP Challenge

I am struggling to achieve the same outcome with my JavaScript as I do with my PHP code. The issue lies in how JavaScript omits backslashes, unlike PHP. To address this, I have included random forward and backward slashes to cater for different systems. Se ...

The Vuetify asynchronous search feature is only able to send single characters at a time, and it doesn't concatenate the characters

In my Vue component, I have the following code: <template> <v-form ref="form" @submit.prevent="search"> <v-row class="pa-0"> <v-col cols="12" md="2" class="d-flex"> <v-autocomplete ...

What is the best way to manage error responses using Retrofit 2?

Is there a way to effectively handle error responses in Retrofit 2 when using synchronous requests? In my scenario, I need to be able to process responses that typically return an array of pets under normal circumstances, but also handle cases where the r ...

Unable to define the color of icons path using CSS in Vue 3

When using the iconify library for VueJS, the icons' paths automatically have "currentColor" as their fill color. The issue arises when trying to set a path's color via CSS, as it seems to be ineffective. Even with "!important", the color won&apo ...

Error message: "Reactjs - TypeError: The property 'map' cannot be read as it is undefined in the table"

I have encountered an issue while using the material-ui table. I am able to map the items and display them successfully, but when trying to map the orders.items in the table, I get the following error: TypeError: Cannot read property 'map' of u ...

I am seeking to perform these operations solely using pure WebGL, without relying on the Three.js library

if( keyboard.pressed("up")) pobjects[movementControls.translate].translateX(1); if( keyboard.pressed("down")) pobjects[movementControls.translate].translateX(-1); if( keyboard.pressed("left")) pobjects[mo ...

Repeating items must be unique; duplicates are not permitted on ng-repeat

The data retrieved from the service request is in JSON format and looks like this: { "entries": [{ "id": 2081, "name": "BM", "niceName": "bodmas" }] }, { "id": 8029, "name": "Mas", "niceName" ...

What is the best way to align a TabPanel component at the center using React Material UI

As I attempt to compile a list of articles while switching to a list of other entities in React + material UI, I have encountered some difficulties. Specifically, I am struggling to center the Card displaying an article in alignment with the centered Tabs. ...

Efficient Checkbox Implementation in ActiveAdmin for Rails 3.1

This query actually encompasses two related inquiries. Enabling "Select all" functionality - In the realm of formtastic, which is used by Active_admin to render forms, how can I implement a button that selects all checkboxes present on the page? While ...