Is there a way to retrieve JSON data using Vue and Axios?

Question

Is there a way to retrieve JSON data using Vue and Axios?

I'm facing an issue trying to retrieve product data from a JSON file. Despite attempting different methods and searching for solutions online, I have not been able to find one that fits my specific scenario. As I am new to both Vue and axios, I appreciate your understanding of my limited knowledge.

Here is the code snippet I have so far:

Vue.component('products',{
data: {
    results: []
},
mounted() {
    axios.get("js/prods.json")
    .then(response => {this.results = response.data.results})
},

<!-- The rest of the template code goes here -->

The provided JSON file looks like this:

{
    "products":[
        {
            "name": "Danser Skydancer",
            "inventory": 5,
            "unit_price": 45.99,
            "image":"a.jpg",
            "new":true
        },
        {
            "name": "Avocado Zwem Ring",
            "inventory": 10,
            "unit_price": 123.75,
            "image":"b.jpg",
            "new":false
        }
    ]
}

The challenge lies in fetching the data from the JSON file specifically. However, the following approach worked successfully:

Vue.component('products',{
    data:function(){
        return{
            reactive:true,
            products: [
           {
            name: "Danser Skydancer",
            inventory: 5,
            unit_price: 45.99,
            image:"a.jpg",
            new:true
          },
          {
            name: "Avocado Zwem Ring",
            inventory: 10,
            unit_price: 123.75,
            image:"b.jpg",
            new:false
          }
            ],
          cart:0
        }
    },

<!-- The remaining template details go here -->

javascript vue.js axios

Answer 1

Answer №1

Following the warnings provided, please take the following actions:

Change the name of the data array from results to products since you are using the latter as a reference name during rendering.
Modify your data option to be a function that returns an object, as the data option must be a function in order for each instance to maintain an independent copy of the returned data object. Refer to the documentation for more details on this.

Vue.component('products', {
  data() {
    return {
      products: []
    }
  },

  mounted() {
    axios
      .get("js/prods.json")
      .then(response => {
        this.products = response.data.products;
      });
  },

  template: `
    //...
  `
}

<div id="products">
  <div class="productsItemContainer" v-for="product in products">
    <div class="productsItem">
 ...

Additionally, if you are not utilizing CDN (as per my understanding), it would be recommended to create the template as a component with a separate Vue file rather than defining it within template literals. Here is an example:

Products.vue

<template>
  <div id="products">
    <div class="productsItemContainer" v-for="product in products">
      <div class="productsItem">
        <!-- Other elements here -->
        
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Products',
    
    data() {
      return {
        products: []
      }
    },

    mounted() {
      axios
        .get("js/prods.json")
        .then(response => {
          this.products = response.data.products;
        });
    }
  }
</script>

After creating the component, include it in your main JavaScript file or any other location where it is required:

import Products from './components/Products.vue';

new Vue({
  el: '#app',
  
  data() {
    return {
      //...
    }
  },
  
  components: {
    Products
  }
})

<div id="app">

  <Products />

</div>

Answer 2

Following the warnings provided, please take the following actions:

Change the name of the data array from results to products since you are using the latter as a reference name during rendering.
Modify your data option to be a function that returns an object, as the data option must be a function in order for each instance to maintain an independent copy of the returned data object. Refer to the documentation for more details on this.

Vue.component('products', {
  data() {
    return {
      products: []
    }
  },

  mounted() {
    axios
      .get("js/prods.json")
      .then(response => {
        this.products = response.data.products;
      });
  },

  template: `
    //...
  `
}

<div id="products">
  <div class="productsItemContainer" v-for="product in products">
    <div class="productsItem">
 ...

Additionally, if you are not utilizing CDN (as per my understanding), it would be recommended to create the template as a component with a separate Vue file rather than defining it within template literals. Here is an example:

Products.vue

<template>
  <div id="products">
    <div class="productsItemContainer" v-for="product in products">
      <div class="productsItem">
        <!-- Other elements here -->
        
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Products',
    
    data() {
      return {
        products: []
      }
    },

    mounted() {
      axios
        .get("js/prods.json")
        .then(response => {
          this.products = response.data.products;
        });
    }
  }
</script>

After creating the component, include it in your main JavaScript file or any other location where it is required:

import Products from './components/Products.vue';

new Vue({
  el: '#app',
  
  data() {
    return {
      //...
    }
  },
  
  components: {
    Products
  }
})

<div id="app">

  <Products />

</div>

Is there a way to retrieve JSON data using Vue and Axios?

Answer №1

Products.vue

Similar questions

Ways to reset the input field of Material UI

Validate selected checkbox using JavaScript

When trying to append in jQuery, the error "JQuery V[g].exec is not a

A guide on assigning a state variable to a dynamically generated component within a React application

Extracting the call from REST API in JSON format

Horizontal scroll box content is being truncated

Creating aliases for a getter/setter function within a JavaScript class

The issue of a non-functional grid with scroll in a flexbox

Retrieve data from backend table only once within the bootstrap modal

Ways to access the scrollTop attribute during active user scrolling

What is the best way to eliminate YouTube branding from a video embedded in a website?

Instantaneous data refresh using Firebase Cloud Functions

Trouble arises when attempting to execute a Vue method through a Vue computed property

Transmitted a file from React to Node but received an empty object

Removing invalid characters in a *ngFor loop eliminates any elements that do not meet the criteria

Using javascript, add text to the beginning of a form before it is submitted

Choose an element from within a variable that holds HTML code

Is there a datatable available for live data with pagination and search functionality?

Text element in SVG not displaying title tooltip

The error message "Data type must be consistent across all series on a single axis in Google Chart" may cause confusion