Неожиданный токен <в JSON в позиции 0 vuejs
Я искал, как решить эту ошибку, но не очень хорошо понимал, как ее исправить.
Я работаю с Lottie-Web над проектом, и мне нужно установить параметры анимации для объекта, чтобы передать его в качестве параметра позже.
Мой компонент:
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: {
},
};
},
но когда эта строка выполняется:
Lottie.loadAnimation(this.animationParams);
я получаю эту ошибку:
Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.xhr.onreadystatechange
то, что я видел в других ответах здесь, в Stackoverflow, заключается в том, что мне не нужно анализировать json, поскольку он уже проанализирован, но я не знаю, как НЕ анализировать его.
вот что находится внутри json файла: http://myjson.com/s0kn6.
как мне загрузить этот файл json без его анализа?
ну я проверил, и это не тот случай: /
@CarlosPisarello Возможно, что указанный путь (/src/data/animation.json) не найден на вашем сервере, который может быть настроен для перенаправления на страницу 404 (т.е. HTML), которая не может быть проанализирована как JSON. Я бы дважды проверил соответствующий сетевой ответ для этого пути в DevTools.
Можно ли поделиться снимком экрана своего сетевого вызова из инструментов разработчика Chrome, а также ответом на этот сетевой вызов? То, что прокомментировал @ tony19, сейчас имеет смысл.
Конечно! @highhope вот он: ibb.co/drGVM7 файл Cuentas.json (в сообщении я изменил его на animation.json, чтобы лучше понять проблему)
Покажи и ответ, пожалуйста.
ооооо, поехали: ibb.co/iJF1Tn
Теперь я понял, я просто не понимаю, что сейчас происходит.
это явно не данные внутри файла JSON, который я вызываю
Ага, значит, @ tony19 был прав. И посмотрите, поможет ли этот пост, stackoverflow.com/questions/2603595/…
Я, наконец, смог получить данные json, я искал структуры других проектов, и что я сделал, так это переместил папку данных в путь / static / и больше не имел ее на пути / src /.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Маловероятно, что ваш сервер обслуживает /src/data/animation.json. Вместо использования path используйте animationData и просто установите объект анимации напрямую (вместо вызова сервера).
Во-первых, я бы просто установил данные анимации в обычный модуль ES6, который экспортирует объект вместо json.
/src/data/animation.js
export default {
// your animation data
}
Обратите внимание, что это файл javascript, а не файл json. Затем в своем компоненте просто импортируйте объект.
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: {
},
};
},
Это задокументировано здесь.
Это увеличит ваш исходный пакет, но вам не придется дополнительно обращаться к серверу для получения данных анимации.
Если этого не сделать, вам нужно будет переместить animation.json по некоторому пути, который обслуживается вашим сервером, и установить для path URL-адрес, относящийся к странице, которая загружена в данный момент.
Взгляните на вкладку сети в инструментах разработчика вашего браузера. Вероятно, вы получите не json, а html.