methods for extracting json data from the dom with the help of vue js

Question

methods for extracting json data from the dom with the help of vue js

Can anyone help me with accessing JSON data in the DOM using Vue.js?

Here is my script tag:

<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      responseObject: ""
    };
  },
  async mounted() {
    try {
      const response = await axios.get("http://localhost:4000/api/blogs");
      console.log(response);
    } catch (e) {
    }
  }
};
</script>

My template to display the data is not showing anything:

  <div>
    {{responseObject}}
  </div>

This is the JSON data I want to display:

{
"status": true,
"responseObject": {
        "resource": "services",
        "status": "success",
        "data": [
            {
                "service_id": "0001",
                "service_name": "Buy Airtime",
                "service_type": "airtime"
            },
]}}

Could someone please guide me on how to display this JSON data in the DOM?

javascript vue.js vuejs2

Answer 1

Answer №1

To achieve this, you can easily assign the response to a property in your data object.

Check out the live demonstration below with descriptive comments added:

new Vue({
  el: '#app',
  data: {
    responseObject: ''
  },
  mounted() {
    // For demonstration purposes, a mock response is used here. You can replace it with an actual API call.
    const response = {
      "status": true,
      "responseObject": {
        "resource": "services",
        "status": "success",
        "data": [{
          "service_id": "0001",
          "service_name": "Buy Airtime",
          "service_type": "airtime"
        }]
      }
    };
    
    // Assign the necessary object from the response to the 'responseObject' data property.
    this.responseObject = response.responseObject.data;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="service in responseObject" :key="service.service_id">
    <h2>{{ service.service_name }}</h2>
    <p>{{ service.service_type }}</p>
  </div>
</div>

Answer 2

To achieve this, you can easily assign the response to a property in your data object.

Check out the live demonstration below with descriptive comments added:

new Vue({
  el: '#app',
  data: {
    responseObject: ''
  },
  mounted() {
    // For demonstration purposes, a mock response is used here. You can replace it with an actual API call.
    const response = {
      "status": true,
      "responseObject": {
        "resource": "services",
        "status": "success",
        "data": [{
          "service_id": "0001",
          "service_name": "Buy Airtime",
          "service_type": "airtime"
        }]
      }
    };
    
    // Assign the necessary object from the response to the 'responseObject' data property.
    this.responseObject = response.responseObject.data;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="service in responseObject" :key="service.service_id">
    <h2>{{ service.service_name }}</h2>
    <p>{{ service.service_type }}</p>
  </div>
</div>

methods for extracting json data from the dom with the help of vue js

Answer №1

Similar questions

Conceal a table with jQuery

Nested arrays in Vue.js

Ruby on Rails slider bar functionality

Implementing the adding functionality within an ejs file

"The use of objects as a React child is not permitted" and code linters

Is it possible to make a call to an endpoint from within the node project?

Animate the React Bootstrap modal only when it is shown or hidden

What is the solution to the error message that states a bind message provides 4 parameters, while a prepared statement "" necessitates 5?

JavaScript not functional, database being updated through AJAX calls

What are some creative ways to provide video responses to a list of questions?

Express server is receiving undefined post parameters from Axios in Vue, even though they are clearly defined in Vue

Opening a Bootstrap Modal in React without relying on npm react-bootstrap

Leverage the power of Vuejs to create a seamless user experience with one tab dedicated to control

mention a Vue.js component computed property that points to a specific DOM element

The malfunctioning of my Jquery datepicker

Implementing Mocks for window.eventBus.$on in Vue.js using Jest Framework

Using Vue's v-tabs as a template component does not display the v-item content

The Mystery of the Undefined Return Value in JavaScript's Map Function

What is the integration process of using Font Awesome with React?

JavaScript does not show an error message if a function is called but has not been defined