Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

Question

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

I have been trying to troubleshoot this issue, but I am having trouble understanding how to resolve it.

Currently, I am using lottie-web in a project and need to set the animation parameters on an object in order to pass them as a parameter later.

This is part of 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: {
      },
    };
  },

However, when I run this line:

    Lottie.loadAnimation(this.animationParams);

I encounter the following error:

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

Based on other responses on Stack Overflow, it seems that I should not need to parse the JSON file since it is already parsed. However, I am unsure how to handle it without parsing.

The content of the JSON file can be found here: .

How can I load this JSON file without parsing it?

javascript json parsing vue.js lottie

Answer 1

Answer №1

It seems like your server may not be serving the /src/data/animation.json file as expected. A better approach would be to use animationData instead of path, and directly set the animation object without relying on a server call.

To achieve this, you can create a regular ES6 module named /src/data/animation.js that exports an object containing your animation data:

export default {
  // your animation data
}

Remember that this is a JavaScript file, not a JSON file. Then, in your component, simply import this 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: {
      },
    };
  },

You can find more documentation on this process here.

This method may increase the size of your initial bundle, but it eliminates the need for an extra server call to fetch the animation data.

If this solution doesn't work, consider moving the animation.json file to a path accessible by your server and adjust the path accordingly to reflect the correct URL relative to your current page.

Answer 2

It seems like your server may not be serving the /src/data/animation.json file as expected. A better approach would be to use animationData instead of path, and directly set the animation object without relying on a server call.

To achieve this, you can create a regular ES6 module named /src/data/animation.js that exports an object containing your animation data:

export default {
  // your animation data
}

Remember that this is a JavaScript file, not a JSON file. Then, in your component, simply import this 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: {
      },
    };
  },

You can find more documentation on this process here.

This method may increase the size of your initial bundle, but it eliminates the need for an extra server call to fetch the animation data.

If this solution doesn't work, consider moving the animation.json file to a path accessible by your server and adjust the path accordingly to reflect the correct URL relative to your current page.

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

Answer №1

Similar questions

Having trouble with JSON search not functioning as expected in Select2 4.0?

I am receiving a high volume of row data from the server. What is the best way to present this information on a redirected page?

Is there a way to effortlessly launch a new window with just a single click?

Exploring GridJS Customization in VueJS

Compare the current return value to the previous value in the success callback of an Ajax request

What are the advantages of utilizing the HttpParams object for integrating query parameters into angular requests?

Guide on extracting the ID within a for loop and incorporating it into a Vue.js function

Using Vue.js to group JSON arrays multiple times

The byte order of integer literals in JavaScript

Encountering the Error "PLS-00201: identifier 'JSON_VALUE' needs to be declared" while using PL/SQL

Best method for separating components

Catch the return of the transition event

Connect the AngularJS data model with a Foundation checkbox element

Utilizing Perl to extract specific data from a JSON query

Step-by-step guide on retrieving JSONP data from Angular service within view by utilizing expressions

Challenges with implementing TailwindCSS classes in a Next.js application

Tips for toggling a menu by clicking a link

Ways to send a POST variable to PHP without refreshing the webpage

jQuery eliminates initial div just a single time

Retrieving the values stored in a JSON object