Блог

Главная - Вопросы по программированию - Как мне отобразить определенные поля из файла json в таблице с данными?

Как мне отобразить определенные поля из файла json в таблице с данными?

#vuejs2 #vuex #vuejs3

#vuejs2 #vuex #vuejs3

Вопрос:

У меня около 300 таких записей. Теперь он отображает все элементы в таблице. Я хочу, чтобы в моей таблице отображались только имя, белки и ккал. Как мне это сделать? Я извлекаю список из API.

 [
   {
      "id":"711113fb-c3d1-46db-9f08-737a66ba643d",
      "name":"Banana",
      "fats":"0.2",
      "carbohydrates":"11.8",
      "proteins":"0.8",
      "kcal":"46",
      "tags":[
         
      ],
      "tag_ids":[
         
      ],
      "diet_phases":[
         
      ],
      "diet_phase_ids":[
         
      ],
      "product_group_id":"1cad5993-78f8-43b0-a0c5-f6f88fdf53b8",
      "product_group_name":"Fruits"
   },
  
       productList: (state) => state.products.list,

This.items — это массив, который содержит элементы в моей таблице.

смонтировано: this.fetchProducts().then(() => { this.items = this.productList; }); },

…mapActions ({ fetchProducts: «продукты / выборка»,})

 actions: {
    fetch({ commit }) {
      return api.products.list({}).then(({ data }) => {
        commit(SET_LIST, data.results);
      });
    },

Комментарии:

1. Вы не показываете, как вы на самом деле отображаете таблицу в данный момент, но вы можете легко перебирать записи, а затем отображать только <td> для тех полей, которые вы хотите. Или вы можете использовать этот приятный компонент таблицы: xaksis.github.io/vue-good-table

2. Я заявил, что я отображаю элементы в массиве this.items: [] , я использую компонент таблицы bootstrap-vue.

Ответ №1:

Все еще отсутствует шаблонная часть вашего компонента, и я не знаю таблицу bootstrap-vue. Итак, я предполагаю, что вы this.items просто отображаете каждый ключ вашего объекта item. Итак, вы хотите контролировать то, что отображается в коде JS, а не в шаблоне, вы можете использовать функцию map . Таким образом, вместо того, чтобы напрямую назначать его this.items , вы можете сделать что-то вроде этого:

 this.items = this.productList.map((item) => {
    return {
        name: item.name,
        proteins: item.proteins,
        kcal: item.kcal,
    };
});