Extract information from XML data and convert it to JSON format

Having trouble extracting data from a parsed XML to JSON. I can't seem to figure out how to get the data properly displayed on my screen. Can someone guide me on the right approach?

Here is the Formatted JSON Data:

{ 
   "event":[ 
      { 
         "name":"Queen",
         "date":"2019-09-12",
         "genre":"rock",
         "time":"20:00:00",
      },
      { 
         "name":"2Pac",
         "date":"2019-09-25",
         "genre":"rap",
         "time":"20:00:00"
      },

data () {
    return {
      result: null
    }
  },
  created () {
    this.getConcertData()
  },
  methods: {
    getConcertData () {
      const parseString = require('xml2js').parseString
      this.$axios.get('members.php?xml')
        .then((response) => {
          const self = this
          parseString(response.data, function (err, result) {
            self.events = result
            console.log(result)
          })
        })
    }
  }

Answer №1

To verify if you have received the data in the correct format, try using developer tools or logging the response.data. After that, ensure that the function require('xml2js').parseString is functioning correctly.

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

Is it possible to vertically center a child div within its parent container using JavaScript when the page loads without explicitly setting its position?

Using JavaScript to vertically center a child div within a fluid container involves calculating the height of both elements and positioning the child div accordingly. However, one issue faced is that the position is not set when the page loads. To solve ...

developing a seamless and uncomplicated banner text animation

Greetings everyone! I am diving into the world of JavaScript and recently attempted to create a banner carousel animation. Specifically, I have 3 banners in rotation where each slide reveals text with an animation effect. However, I'm encountering an ...

What causes the discrepancy in smoothness between the JavaScript animation when offline versus its choppiness when online, particularly on AWS

Recently I delved into game development using HTML5/CSS/JS and embarked on a small project. Check out the game here at this AWS storage link: If you open the game and press SPACE, you'll notice that the ball starts moving with occasional brief pauses ...

How can I convert a JSON template to HTML using AngularJS?

As someone who is just starting out with AngularJS, I am facing an issue where the HTML tags in a JSON file are not being encoded when rendered in HTML using AngularJS. Is there a specific method in AngularJS that can help with this? This is what my HTML ...

When making a request with XMLHttpRequest(), FormData() is not being sent, causing the PHP $_FILES array to be empty and the

My Objective: I am attempting to achieve the task of uploading a file from a user to a specific directory on the server using an HTML <input type="file"> element. To accomplish this, I have implemented a new XMLHttpRequest within the <input> ...

Working with Javascript: Navigating a dynamic array of elements

I need to reorganize a form on my webpage. Currently, all the fields are in one table and I want to move them around based on certain conditions. However, when I try to loop through the elements and move them, the javascript array is changing and causing m ...

Looking for a way to configure webpack with typescript and style loaders for your project template

I recently set up a Vue project using Webpack and typescript, but I ran into some errors when trying to add a <template> element in my .vue file along with a <style> element that caused issues with my webpack watcher displaying errors. Below i ...

Improving conditional rendering in Mui <Cards> component by fixing state behavior

I have a situation where I want to display a Floating Action Button inside each Mui card when hovered over. However, I'm running into an issue with the hover state affecting all cards instead of just the one being interacted with. How can I ensure tha ...

Creating duplicates of a div element with each click

I am looking for a way to create a button (ADD) that, when clicked, generates a form with a field and a delete button. The form fields and the delete button should be erased when the button is clicked. <button type="button" class="btn btn ...

Changing Ionic back button to a specific route/view

Coming from view1, I navigate to $state.go('app.view3'); Now that I'm in my view3.html, how can I configure the back button to direct to view2 when clicked by the user? ...

Solutions for accessing data variables outside of a Vue file

Utilizing Vue.js for data binding and filtering has been a rewarding experience. I've set up a Vue object within a .js file and now I aim to pass external data into it. Let's take a look at my test object testFile.js: var vm = new Vue({ el: ...

The AJAX request seems to be malfunctioning despite the fact that both the PHP and JS files function correctly independently

I have set up an AJAX call and tested the JS file by alerting out the POST values being sent along with the data string. Everything seems fine at that point. I then passed these values to the PHP file where they are required, making sure to keep it simple ...

Dynamic value updates using jQuery input type formulas

I need help with a form that has two inputs: The first input allows the user to enter an amount, such as 1000. The second input is read-only and should display the value of the first input plus 1%. For example, if the user types in 1000 in the first fie ...

Custom Email Template for Inviting Msgraph Users

I'm currently exploring the possibility of creating an email template for the MS Graph API. I am inviting users to join my Azure platform, but the default email they receive is not very visually appealing. public async sendUserInvite(body: {email: < ...

Enable CORS for AJAX requests with RESTful web services in Google Chrome

My web-based project is fully written in jQuery and JavaScript. On the client side, I am calling RESTful webservices via AJAX like this: $.ajax({ type: 'GET', timeout: 1000000000, headers: { 'Access-Control-Allow-Origin': ...

Fade in and out on button press

There is a button with the following HTML code: <input type="submit" id="btnApply" name="btnApply" value="Apply"/> Upon clicking the button, a div should be displayed. <div> Thanks for applying </div> The display of the div should fade ...

Is there a way to make a string evaluate inline using JavaScript and React?

In my function, the following code works perfectly: console.log(theme.colors.blues[1]); To make the last part dynamic, I tried the following approach: const getColor = (theme, passedColorProp) => { console.log(theme.colors.[passedColorProp]); }; g ...

Transferring dynamic <select> values to a list demonstrates its worth

Whenever the button is clicked, a new select option is added. On removal, the last member of the array is deleted. The goal now is to transfer the selected value to a list below. This snippet showcases the code in question: $scope.langInput = { cou ...

Requirements for using Angular JS and Node JS

With upcoming projects involving AngularJS and Node.js, I'm a bit apprehensive as I don't have much experience with JavaScript. Should I start by picking up a book on each technology, or is it essential to learn more about JavaScript first before ...

Manipulate objects in three.js to always face the mouse pointer

It seems that despite my efforts, I am struggling with this task as I am relatively new to it. Surprisingly, I am not getting any errors in Dreamweaver. I've started fresh by integrating the look at function with the OBJ loader, camera, and lights in ...