Форум программистов, компьютерный форум, киберфорум
JavaScript: Vue.js
Войти
Регистрация
Восстановить пароль
Другие темы раздела
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
394 / 147 / 31
Регистрация: 26.11.2019
Сообщений: 394
0

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

19.01.2021, 22:08. Просмотров 441. Ответов 1
Метки (Все метки)


в учебном проекте, собранном на Vue CLI, хочу сделать что-то вроде источника данных, в виде json-файла, обращаться к нему из store, при помощи actions, и полученные данные распарсить в js-объект и поместить его в state, и оттуда уже дальше пользоваться для отрисовки некоторых блоков. Без Vue я такое уже делала и всё работало норм.
написала
Javascript
1
2
3
4
5
6
7
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
1
2
3
4
5
6
{
    "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-файла?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.01.2021, 22:08
Готовые ответы и решения:

Получить данные в формате json из txt файла
Не могу разобраться с проблемой. у меня есть ссылка на текстовый файл ...

Как получить данные из JSON?
Доброго времени суток, форумчане. Помогите разобраться с JSON, есть следующий код: &lt;!doctype...

Как получить данные из Json
Как получить значение из &quot;wd&quot;? {&quot;status&quot;:1,&quot;pogoda&quot;:{&quot;Moscow (2)&quot;:{&quot;wd&quot;:7,&quot;lv&quot;:0},&quot;Kazan (1...

Newtonsoft.JSON как получить данные из массива?
В общем, есть классы: public class lineResults { public string line {...

1
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.