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>

You're storing the response data in posts, shouldn't it be variants? — painotpi
– painotpi, Commented Jan 3, 2020 at 4:44
@pai.not.pi I updated the question , it's not working with the variants as well — Parduman Rana
– Parduman Rana, Commented Jan 3, 2020 at 4:49

Anis · Accepted Answer · 2020-01-03 05:13:21Z

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

I changed the Variable to variable in my vue js & it executed the json data in {{variants}} but now it's running the loop based upon the data it has but I am unable to fetch details like :v-for variant in variants under this it's not executing anything like {{variant.variantname}} @MA Rahman

painotpi · Accepted Answer · 2020-01-03 04:49:50Z

0

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

You'll need to change this line,

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

answered Jan 3, 2020 at 4:49

painotpi

7,0122 gold badges40 silver badges72 bronze badges

5 Comments

Parduman Rana Over a year ago

I was trying with delimiters only , Forgot to add in stack question I updated it , but still couldn't work

painotpi Over a year ago

What's the issue? do you get any errors? what's the current output?

Parduman Rana Over a year ago

In console It's showing error ReferenceError: variants is not defined at wn.eval (eval at Ya (vue.min.js:6), <anonymous>:3:88) at wn.e._render (vue.min.js:6) at wn.r (vue.min.js:6) at fn.get (vue.min.js:6) at new fn (vue.min.js:6) at vue.min.js:6 at wn.$mount (vue.min.js:6) at wn.$mount (vue.min.js:6) at wn.t._init (vue.min.js:6) at new wn (vue.min.js:6)

painotpi Over a year ago

There's a case mismatch. Some part of your code has Variants with a capital V and some other places it's variants with a lowercase v

Parduman Rana Over a year ago

I changed the Variable to variable in my vue js & it executed the json data in {{variants}} but now it's running the loop based upon the data it has but I am unable to fetch details like :v-for variant in variants under this it's not executing anything like {{variant.variantname}} @pai.not.pi thankyou

Collectives™ on Stack Overflow

How Can I import json data in Vue Js with axios

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related