Unexpected token < in JSON at position 0 vuejs

Question

I've been looking for how to solve this error but i didn't understand very well how t fix it.

I'm working with lottie-web on a project and i have to set the params of the animation on an object to pass it as a parameter later.

My component:

import Lottie from './../../node_modules/lottie-web/build/player/lottie';

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      path: '/src/data/animation.json',
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

but when this line is executed:

    Lottie.loadAnimation(this.animationParams);

i get this error:

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.xhr.onreadystatechange

what i have seen on other answers here in Stackoverflow is that i don't have to parse the json since it's already parsed, but i don't know how to NOT parse it.

here's what's inside the json file: http://myjson.com/s0kn6.

how do i have to load that json file without parsing it?

Take a look at the network tab of your browsers devtools. You probably don't get a json but instead html. — Roland Starke, May 07 '18 at 15:39
@CarlosPisarello It's possible that the specified path (`/src/data/animation.json`) is not found on your server, which might be setup to redirect to a 404 page (i.e., HTML), which fails to parse as JSON. I would double-check the corresponding network response for that path in DevTools. — tony19, May 07 '18 at 16:18
Is it possible for you to share a screenshot of your network call from chrome developer tools and also the response for that network call? What @tony19 has commented makes sense at this point. — highhope, May 07 '18 at 16:24
Sure! @highhope here it is: https://ibb.co/drGVM7 the file is Cuentas.json (on the post i changed it to animation.json to better understanding of the problem) — Carlos Pisarello, May 07 '18 at 16:30
that's obviously not the data inside the JSON file i'm calling — Carlos Pisarello, May 07 '18 at 16:35
Yup so @tony19 was correct. And see if this post helps, https://stackoverflow.com/questions/2603595/why-am-i-getting-304-not-modified-error-on-some-links-when-using-httpwebrequ — highhope, May 07 '18 at 16:37
I could finally get the json Data, i was looking on another projects structures and what i did was move the data folder to the /static/ path and have it no longer on the /src/ path. — Carlos Pisarello, May 07 '18 at 16:59

Bert · Answer 1 · 2018-05-07T16:57:01.907

It's unlikely your server is serving /src/data/animation.json. Instead of using path use animationData and just set the animation object directly (instead of via a server call).

First, I would just set the animation data to a regular ES6 module that exports an object instead of json.

/src/data/animation.js

export default {
  // your animation data
}

Note that it's a javascript file, not a json file. Then in your component, just import the object.

import Lottie from './../../node_modules/lottie-web/build/player/lottie';
import animationData from "/src/data/animation"

export default {
  name: 'Illustration',
  mounted() {
    this.animationParams = {
      container: document.getElementById('animation'),
      renderer: 'svg',
      loop: 'true',
      autoplay: 'false',
      animationData,
    };
    Lottie.loadAnimation(this.animationParams);
  },
  data() {
    return {
      animationParams: {
      },
    };
  },

This is documented here.

This will make your initial bundle larger, but you won't have to make an additional call to the server for the animation data.

Barring that, you will need to move animation.json to some path that is being served by your server and set path to a url relative to the page that is currently loaded.

Unexpected token < in JSON at position 0 vuejs

1 Answers1