Как получить данные из JSON-файла?

@Peskova_Sveta · Регистрация: 26.11.2019

в учебном проекте, собранном на Vue CLI, хочу сделать что-то вроде источника данных, в виде json-файла, обращаться к нему из store, при помощи actions, и полученные данные распарсить в js-объект и поместить его в state, и оттуда уже дальше пользоваться для отрисовки некоторых блоков. Без Vue я такое уже делала и всё работало норм.
написала

Javascript

actions: {
    fetchData() {
      return fetch('./db.json')
      .then(response => response.json())
      .then(req => console.log(req))
    }
  },

вызвала в App.vue вот так

Javascript

1
2
3

created() {
    this.$store.dispatch('fetchData');
  }

в консоли браузера пишет ошибку
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
т.е. не формат JSON, но там всё норм с форматом, файл взят из того самого проекта на котором всё работало без Vue, данные там простые объекты, вот кусочек:

Кликните здесь для просмотра всего текста

Javascript

{
    "data": [
        { "hex_code": "#C2B078", "ral_code": "1001", "name": "Бежевый" },
        { "hex_code": "#C6A664", "ral_code": "1002", "name": "Желтый песок" },
        { "hex_code": "#E5BE01", "ral_code": "1003", "name": "Желтый бледный" },
]}

Погуглив, нашла совет посмотреть что приходит не через response.json() , а через response.text()
и что я увидела в консоли? HTML-код страницы index.html из папки public
но, секундочку, запрос ведь не туда посылался!
(json-файл я положила в папку src , рядом с App.vue )
и пробовала другие файлы, другого формата, всё равно показывает index.html из папки public

вопрос:
куда поместить json-файл чтобы запрос приходил к нему?
потому что куда бы я его ни помещала, результат один и тот же

p.s. axios и router не использовала

Вернуться к обсуждению:
Как получить данные из JSON-файла?

Следующий ответ

Другие темы раздела
Vue.js JavaScript textarea не принимает корректный после display none https://www.cyberforum.ru/ vue-js/ thread2769897.html Стиль textarea overflow:hidden; outline: none; border: none; width: 100%; resize: inherit; Через foreach получаются записки(newRecord и из них вытаскиваются текст и id...	Vue.js JavaScript Стоит ли переходить на Vue.js 3? Всем привет А кто плотно работал с Vue.js 3? У него есть перспектива ? Стоит ли переходить на него со 2й ветки? Спасибо!
v-if Vue.js JavaScript есть такой компонент, просто поле ввода и кнопка "Отправить" файл EditDataUser.vue, дочерний <template> <div class="edit-wrapper"> <div class="edit-item"> <input type="text"...	Vue.js JavaScript Дочерние компоненты Использую Vue CLI, все компоненты находятся в папке components, каждый в отдельном файле. Можно ли один из них назначить дочерним другому из этой же папки? У меня как-то не получается файл... https://www.cyberforum.ru/ vue-js/ thread2766819.html
Vue.js JavaScript Vue3 TypeScript ToDo https://www.cyberforum.ru/ vue-js/ thread2765888.html Добрый день! Кто-нибудь может помочь? Как данный код переделать на TypeScript (добавить типы). ToDo App. <template> <div> <input v-model="inputField" ...	Vue.js JavaScript Выбор в теге select значения из бд Здравствуйте, в select я загружаю значения из БД. Но как чтобы при загрузке страницы он это значение отображал? <select v-model="selected"> <option disabled value=''>Выберите услугу...
Как сделать раскрывающееся меню? Vue.js JavaScript есть меню с подменю, как при клике на пункт меню, вывести его подменю, сейчас раксрываются все подменю <ul :class="$style.catalogCategories"> <li v-for="(category, index) in categories"...	Vue.js JavaScript Как правильно добавить фотографии в слайдер Vue Carousel 3D? Пытаюсь разобраться в документации Vue Carousel 3D и не могу понять, как сделать так, чтобы в каждом слайде отображалась одна картинка. Поясню: Хочу сделать слайдер, как в документации в примере... https://www.cyberforum.ru/ vue-js/ thread2763764.html
Vue.js JavaScript При нажатии на backspace увеличивался счетчик при проверки регулярным выражением https://www.cyberforum.ru/ vue-js/ thread2762367.html Здравствуйте есть такой код: if (//.exec(String(this.mestxt))) { this.countmes++ } Но при нажатии на backspace он не работает. Я хочу чтобы при нажатии на...	Vue.js JavaScript Как переписать код на VUE CLI? Здравствуйте, уважаемые программисты! Я так понял, что api пишется на PHP и далее обращаемся к этому файлу через Java Script. Теперь хочу переписать свой код на VUE CLI и столкнулся с проблемой, что... https://www.cyberforum.ru/ vue-js/ thread2761906.html
Vue.js JavaScript VueCLI ошибка при установки https://www.cyberforum.ru/ vue-js/ thread2756363.html Привет, пытаюсь поставить VueCLI но npm выдает ошибки C:\Windows\system32>npm install -g @vue/cli npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer...	Vue.js JavaScript Объясните логику проверки победителя в крестики нолики var appVue = new Vue({ el: '#app', data: { fieldMasses: , move: false, fieldSize: 3, hod: 0, name:'', isActive: false, igra:... https://www.cyberforum.ru/ vue-js/ thread2754080.html