Как отфильтровать массив объектов?

Question

[Gregory]

Не получается переписать функцию для более обобщенного варианта.
Имеется массив данных, который я фильтрую таким образом:

computed: {
      resultGenes: function(){
          return this.filteredResultGenes.filter(function(elem) {
              return elem.snps[0].snpgroup[0].group_id == 1;
          });
      }

Данный фильтр работает. Но как переписать функцию фильтрации, если объектов snps и snpgroup будет несколько, а не по одному?
Пробовал через each, ничего не вышло. Мой вариант выглядел как-то так:

computed: {
      resultGenes: function(){
          return this.filteredResultGenes.filter(function(elem) {
              $.each(elem.snps, function(elem) {
                   $.each(elem.snpgroup, function(elem) {
                         return elem.group_id == 1;
                   }
              }
          });
      }

Answer 1

[0xD34F]

То есть, все group_id во всех вложенных объектах должны быть равны 1? Попробуйте так:

resultGenes() {
  return this.filteredResultGenes.filter(elem => {
    return elem.snps.every(n => n.snpgroup.every(m => m.group_id === 1));
  });
}

UPD. Вынесено из комментариев:

есть похожая задача, только мне необходимо сравнить два значения и если true то отрисовать блок. Every, как я понял возвращает лишь true или false. А есть какой-то метод, чтобы можно было в директиве v-if в массиве пройтись по всем объектам этого массива? ну т.е.
я хочу, чтобы сработала конструкция: v-if="type.id == date.activities.type_id " вот только activities может либо вообще не быть, либо быть пустым либо несколько их может быть.

Не надо v-if. Сделайте вычисляемое свойство, которое будет представлять данные, соответствующие условию, и выводите их все.

Comments

[Gregory]

0xD34F, спасибо большое. А подскажите, пожалуйста, ...every(n => n.snpgroup... подобная конструкция к какой теме относиться, где я могу почитать про нее и подобный синтаксис?

[0xD34F]

Gregory, "конструкций" тут на самом деле две - every и стрелочные функции.

[Gregory]

0xD34F, спасибо. А еще можно вопрос, просто я так понял Вы хорошо разбираетесь во Vue. Все вроде работает, но если я перезагружаю страницу, то ловлю ошибку:

Error in mounted hook: "TypeError: elem.snps is undefined"

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

[0xD34F]

Gregory, ох, не стану гадать, что у вас может быть не так - для меня информации маловато. Лучше оформите это как отдельный вопрос, с более подробным описанием проблемы.

И нет, во Vue я не так чтобы здорово разбираюсь. Здесь явно есть люди куда компетентнее меня.

[Gregory]

0xD34F, хорошо еще раз спасибо, извиняюсь за то, что столько Вас дергаю :)

[lavezzi1]

Gregory, а где и когда вы данные подгружаете?

[Gregory]

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

[lavezzi1]

Gregory, не, я имею ввиду на каком этапе прогрузки DOM вы грузите данные? По хорошему данные нужно начинать грузить в хуке created()

[Gregory]

lavezzi1, хм, т.е. подобный способо не очень правильный:

Грубо говоря у меня компонент выглядит так:

<template>
    <div>{{test}}</div>
</template>
<script>
import {mapGetters} from 'vuex'

export default {
    computed: {
        ...mapGetters({
             test: 'diary/getUserLooseWeight'
        })
    },
    mounted: function () {
        this.$nextTick(function () {
             //какие-то функции запускающиеся сразу после рендеринга
       }
    }
} 
</script>

И по такое аналогии из стора забираются все мне нужные данные и именно они при рефреше страницы пропадают.

[lavezzi1]

Gregory, Смотрите. Создайте экшен в сторе который фетчит данные, пример:

// store
fetchData({ commit }) {
    return fetch('/api/data/')
        .then(response => response.json())
        .then((response) => {
            commit('SET_DATA', response.data);
        });
}

Дальше в created() на странице вызываете данный экшен. this.$store.dispatch('fetchData')

Далее можно в watch смотреть за данными в сторе, если прилетели то тогда уже делаете что с ними хотите. Как один из валидных вариантов.

[Gregory]

lavezzi1, хорошо, спасибо. Посижу поразбираюсь, vue.js пока еще в новинку для меня совсем, но в целом, что Вы имеете в виду я понял. Благодарю за помощь.

[lavezzi1]

Gregory, вот, кстати, хороший пример использования vuex от автора Vue: https://github.com/vuejs/vuex/blob/dev/examples/sh...

Там в репозитории много примеров на самом деле.

[Gregory]

lavezzi1, окей, посмотрю :) спасибо.

[Gregory]

0xD34F, возвращаясь к вашему решению с методом every..
у меня сейчас есть похожая задача, только мне необходимо сравнить два значения и если true то отрисовать блок. Every, как я понял возвращает лишь true или false. А есть какой-то метод, чтобы можно было в директиве v-if в массиве пройтись по всем объектам этого массива? ну т.е.
я хочу, чтобы сработала конструкция: v-if="type.id == date.activities.type_id " вот только activities может либо вообще не быть, либо быть пустым либо несколько их может быть.
Сможете помочь, а то меня кажется никто не понял на тостере :(