Фильтр данных Vuejs для JSON

Question

До этого я сохранял данные непосредственно в компоненте в «Data ()» как массив «технологий» и фильтровал их по типу и выводил в html.Оказалось, что мне нужно было поместить отдельный файл и добавить в него дополнительные данные.И теперь фильтр не работает из-за этого подхода.Как привязать его к данным такого типа?Структура файла «data.json» следующая.Мне нужно отфильтровать массив по типу и выводу.

[
  {
    "language": "Rus",
    "Technologies":[{
                        label: "Vue Js ",
                        price: 1.3,
                        type:"js"
                    },
                    {
                        label: "CMS WordPress",
                        price: 1.05,
                        type:"CMS"
                    }],
    "Another":[{},{}...],
  }
]

Какая структура была раньше и как она работала.

export default {
        name: 'testappp',
        data() {
            return {
                Technologies: [
                        {
                            label: "Vue Js ",
                            price: 1.3,
                            type:"js"
                        },
                        {
                            label: "CMS WordPress",
                            price: 1.05,
                            type:"CMS"
                        },
                        {
                            label: "Yii2",
                            price: 1.5,
                            type:"php"

                        },
                        {
                            label: "другой js-фреймворк",
                            price: 1.7,
                            type:"noname"
                        },
                        {
                            label: "React Js ",
                            price: 1.9,
                            type:"js"
                        },
                        {
                            label: "CMS Joomla",
                            price: 1.1,
                            type:"CMS"
                        },
                        {
                            label: "Laravel",
                            price: 1.6,
                            type:"php"
                        },
                        {
                            label: "другой php-фреймворк",
                            price: 1.8,
                            type:"noname"
                        },
                        {
                            label: "Angular",
                            price: 1.6,
                            type:"js"
                        },
                        {
                            label: "CMS OpenCart",
                            price: 1.3,
                            type:"CMS"
                        },
                        {
                            label: "Symfony",
                            price: 1.6,
                            type:"php"
                        },
                        {
                            label: "Другая CMS",
                            price: 1.9,
                            type:"noname"
                        }
                ]

 }        } 

Фильтр как выглядел

computed: {            

            filteredItemsJS() {
                return this.Technologies.filter(item => {
                            return item.type.toLowerCase().indexOf("js") > -1
                        })
            },
            filteredItemsNoName() {
                return this.Technologies.filter(item => {
                            return item.type.toLowerCase().indexOf("noname") > -1
                        })
            },
            filteredItemsCMS() {
                return this.Technologies.filter(item => {
                            return item.type.toLowerCase().indexOf("cms") > -1
                        })
            },
            filteredItemsPHP() {
                return this.Technologies.filter(item => {
                            return item.type.toLowerCase().indexOf("php") > -1
                        })
            }
        }

Answer 1

Поскольку у вас есть экспорт по умолчанию в вашем коде, у нас, очевидно, имеется модульная система s, вы можете импортировать локальный файл в компонент следующим образом:

import jsonData from './path/to/file';

Затем вы можете JSON.parse это всозданная функция (см. ниже та же самая функция) в вашем массиве технологий.

Если вы хотите загрузить data.json с удаленного сервера, можете использовать библиотеку ajax по вашему выбору (axios и т. д.), чтобы получитьданные в функции created.

Поскольку отклик json, который вы показали, отображается непосредственно в вашем жестко заданном массиве данных, вы можете просто назначить ответ данным, используя this.Technologies.

I 'Я рекомендую инициализировать данные. Технологии как пустой массив, чтобы предотвратить сбой любого из ваших существующих вычисляемых свойств.Поскольку они являются реактивными, после загрузки массива технологий любые привязки к вычисляемым свойствам фильтрации будут обновляться автоматически.

Примерно так ...

default export {
  name: "",
  data(){
    return {
        Technologies: []
    }
  },
  computed: {....},
  created() {
    ajaxPromiseLib.get(URL_TO_JSON_ENDPOINT).then(data => this.Technologies = data);
  }
}