Невозможно отфильтровать массив из API на VueJS - PullRequest
Новая
       60

Невозможно отфильтровать массив из API на VueJS

0 голосов
/ 08 апреля 2020

Я работаю над приложением Nativescript- Vue и пытаюсь решить эту проблему.

Ситуация

Я получаю данные от API. Ниже приведена структура данных, которые я получаю от API 

{
"count": 9,
"results": [
    {
        "id": 1,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",            
        "gender": "male",
        "age": 32,
        "status": "active",

    },
    {
        "id": 3,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",            
        "gender": "male",
        "age": 32,
        "status": "active",

    },
    {
        "id": 4,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",
        "age": 34,
        "status": "inactive",

    },
    {
        "id": 6,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",
        "age": 65,
       "status": "inactive",
    },
    {
        "id": 2,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",
        "age": 19,
        "status": "pending",

    },

]

Ниже приведен код vue, который у меня есть. 

 export default {
data() {

    return{
        allData:[],
        total:[],
        active:[],
        inactive:[],
        pending:[]       

       }
},
mounted() {
   axios({ method: "GET", "url": "https://api.url" }).then(
       response =>
       {            

             this.allData = response.data.results,
             this.total = response.data.count               

         }, error => {
            console.error(error);
        }
   )       
},

computed:{
        active(){
            return this.allData.filter((status)=>{
                return this.allData.status.match("active");
                 })
            }

        },

  }

Моя цель - показать количество записей с активными , неактивный и ожидающий статус в приложении. Я использую этот фрагмент, чтобы сделать это для активных. 

<Label class="numbers" :text="active.count" width="200" height="50" />

Может кто-нибудь сказать мне, где я терплю неудачу.

Заранее спасибо. Аши sh А.

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Сначала обновите вычисляемое свойство следующим образом: 

computed: {
    active() {
      return this.allData.filter(d => d.status === 'active')
    }
  },
}

Так как использование this.allData.status неверно, поскольку status является свойством объекта в массиве allData. this.allData[0].status сработало бы, но в методе filter() это не требуется, поскольку каждый объект внутри фильтра используется с помощью переменной d.

Затем обновите шаблон следующим образом: 

<Label class="numbers" :text="active.length" width="200" height="50" />

Обратите внимание, что active - это массив, а массив не имеет свойства count, вместо этого используйте length, чтобы получить счетчик активных данных.

1 голос
/ 08 апреля 2020

Ваш active фильтр не выполняет то, что вы на самом деле намеревались сделать.

Если вы измените его на следующее, он должен фильтроваться правильно - и active вернет массив активных элементов. Если вас интересует только их число, вы можете установить цепочку на .length после фильтра, и вместо него будет возвращено несколько активных элементов. 

computed: {
  active() {
    return this.allData.filter((item) => item.status === "active");
  }
}

Для получения дополнительной информации о методе filter см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

...