How Can I import json data in Vue Js with axios

Question

My JSON Data is like this which was earlier saved in js file of vue & was accessing it from there I want my html v-for: condition to work as it was working fine earlier I tried the method in Docs of Vue js but it couldn't fetch the json data & execute it , plese help if anyone can.

variants: [
            {
                variantId:501,
                variantImage: 'assets/images/demo_watch_1.png',
                variantname: 'alpha',
                typeslug: 'men',
                dialname: '26.5x28.5' ,


                items: [
                    {
                        itemId: 1,
                        itemimage: 'assets/images/demo_watch_2.png',
                        itemcolour: 'gold'
                    },
                     {
                        itemId: 2,
                        itemimage: 'assets/images/demo_watch_4.png',
                        itemcolour: 'pink',
                    },
                    {
                        itemId:3,
                        itemimage: 'assets/images/demo_watch_1.png',
                        itemcolour: 'black'
                    },

                ]

            },
              {
                variantId:502,
                variantImage: 'assets/images/demo_watch_2.png',
                variantname: 'alpha',
                  typeslug: 'women',
                   dialname: '35',
                    items: [
                    {
                        itemId: 1,
                        itemimage: 'assets/images/demo_watch_2.png',
                        itemcolour: 'gold'
                    },
                     {
                        itemId: 2,
                        itemimage: 'assets/images/demo_watch_4.png',
                        itemcolour: 'pink',
                    },
                    {
                        itemId:3,
                        itemimage: 'assets/images/demo_watch_1.png',
                        itemcolour: 'black'
                    },

                ]
            } ],

My Vue code is like this

var watchslider = new Vue({

    el: '#Products',

   data() {
    return {
          Variants: []
    }
  },
     mounted() {
     axios
      .get('./products.json')
      .then(response => {
          this.Variants = response.data

                        }) 
           .catch((e) => {
      console.error(e)
    })
           } 

});

But I am Unable to fetch data from json & execute it in my html

    <div id="Products" class="responsive py-5">

     <div v-for="(variant,variantIndex) in variants"  :key="variant.variantId" class="col-lg-4 col-4 p-5">

    <p>{{variant.variantImage}}</p>

    </div>
</div>

Answer 1

This is because of 3 reasons.

1) your json is invalid

try this

    {
    "variants": [
      {
        "variantId": 501,
        "variantImage": "assets/images/demo_watch_1.png",
        "variantname": "alpha",
        "typeslug": "men",
        "dialname": "26.5x28.5",
        "items": [
          {
            "itemId": 1,
            "itemimage": "assets/images/demo_watch_2.png",
            "itemcolour": "gold"
          },
          {
            "itemId": 2,
            "itemimage": "assets/images/demo_watch_4.png",
            "itemcolour": "pink"
          },
          {
            "itemId": 3,
            "itemimage": "assets/images/demo_watch_1.png",
            "itemcolour": "black"
          }
        ]
      },
      {
        "variantId": 502,
        "variantImage": "assets/images/demo_watch_2.png",
        "variantname": "alpha",
        "typeslug": "women",
        "dialname": "35",
        "items": [
          {
            "itemId": 1,
            "itemimage": "assets/images/demo_watch_2.png",
            "itemcolour": "gold"
          },
          {
            "itemId": 2,
            "itemimage": "assets/images/demo_watch_4.png",
            "itemcolour": "pink"
          },
          {
            "itemId": 3,
            "itemimage": "assets/images/demo_watch_1.png",
            "itemcolour": "black"
          }
        ]
      }
    ]
  }

2) You use different variable in HTML and javascript file , both should be same

 <div v-for="(variant,variantIndex) in Variants" :key="variant.variantId" class="col-lg-4 col-4 p-5">
            <p>{{variant.variantImage}}</p>
        </div>



new Vue({

    el: '#Products',

    data() {
        return {
            Variants: []
        }
    },
    mounted() {
        axios
            .get('./products.json')
            .then(response => {
                this.Variants = response.data.variants

            })
            .catch((e) => {
                console.error(e)
            })
    }

});

3) you dont need to put vue instance in a variable watchslider

Answer 2

You're missing the delimiters {{ }} in your markup for your data binding.

You'll need to change this line,

<p>{{ variant.variantImage }}</p>