Фильтровать массив на основе другого массива Vuejs - PullRequest
Новая
       8

Фильтровать массив на основе другого массива Vuejs

0 голосов
/ 13 января 2020

У меня есть два массива 

 {
"products": [
    {
        "name": "Jivi",
        "Hint": "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
        "frequency": ["1", "2", "8"]
    },
    {
        "name": "Adynovi",
        "Hint": "40-50 IE/kg 2x/Woche im Abstand von 3-4 Tagen",
        "frequency": ["2", "6", "7"]
    },
    {
        "name": "Esperoct",
        "Hint": "\"50 IE/kg \nalle 4 Tage\"\n",
        "frequency": ["7"]
    }
],
"haufigkeit" : [
    {
        "name": "1x / Woche",
        "id": 1,
        "value": 52.1428571429
    },
    {
        "name": "2x / Woche",
        "value": 104.2857142857143,
        "id": 2
    }
]
}

У меня есть выпадающий список, используя Vuejs, где products.name рендеринга. 

 <select v-model="selectFrequency">
        <option v-for="(level1,index) in dataJson.products"
                v-bind:value="level1.frequency">{{level1.name}}</option>
      </select>

Например, когда я выбираю Jivi, я бы хотел сравнить числа в frequency из products с id в haufigkeit, а когда они совпадут, отобразить name из haufigkeit

Вот то, что я пытаюсь 

computed:{
selectFrequency:function(){
    let results= this.haufigkeit.filter(array=>array.every(item => this.products.filter(group=>group.frequency.includes(item))));
}
}

Я пытался два дня, и это дает мне ошибку cannot read property 'every' of undefined. Кто-нибудь может подсказать, где я совершил ошибку?

Ответы [ 2 ]

1 голос
/ 13 января 2020

Изменить: Хорошо, теперь я понимаю, что-то вроде этого должно работать для вас: https://jsfiddle.net/q9grc04s/

Если вы выберете продукт, вы увидите, что он отображает любой haufigkeit с включенным идентификатором на выбранной частоте. 

<template>
<div>
  <div>
    <select v-model="selectedFrequency">
      <option
        v-for="(level1, i) in products"
        :key="i"
        :value="level1.frequency"
      >
        {{level1.name}}
      </option>
    </select>
  </div>
  <div>
    <h1>Haufigkeit Matches:</h1>
    <ul v-if="haufigkeitMatches">
      <li v-for="match in haufigkeitMatches">{{ match.name }}</li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  data: {
    selectedFrequency: [],
    products: [
        {
            name: "Jivi",
            Hint: "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
            frequency: [1, 2, 8]
        },
        {
            name: "Adynovi",
            Hint: "40-50 IE/kg 2x/Woche im Abstand von 3-4 Tagen",
            frequency: [2, 6, 7]
        },
        {
            name: "Esperoct",
            Hint: "\"50 IE/kg \nalle 4 Tage\"\n",
            frequency: [7]
        }
    ],
    haufigkeit : [
        {
            name: "1x / Woche",
            id: 1,
            value: 52.1428571429
        },
        {
            name: "2x / Woche",
            value: 104.2857142857143,
            id: 2
        }
    ]
  },
  computed: {
    haufigkeitMatches(){
        return this.haufigkeit.filter(x => this.selectedFrequency.includes(x.id))
    }
  }
}
</script>

Примечание: извините за все правки, я пытаюсь разобраться с редактором stackoverflow, хотя ссылка 1010 * fiddle является рабочим решением.

1 голос
/ 13 января 2020

Вы можете использовать Javascript некоторую функцию. в приведенном ниже примере я возвращаю идентификаторы массива haufigkeit, которые равны частотам продуктов 

var data = {
    "products": [
        {
            "name": "Jivi",
            "Hint": "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
            "frequency": ["1", "2", "8"]
        },
        {
            "name": "Adynovi",
            "Hint": "40-50 IE/kg 2x/Woche im Abstand von 3-4 Tagen",
            "frequency": ["2", "6", "7"]
        },
        {
            "name": "Esperoct",
            "Hint": "\"50 IE/kg \nalle 4 Tage\"\n",
            "frequency": ["7"]
        }
    ],
    "haufigkeit" : [
        {
            "name": "1x / Woche",
            "id": 1,
            "value": 52.1428571429
        },
        {
            "name": "2x / Woche",
            "value": 104.2857142857143,
            "id": 2
        }
    ]
};

var result = [];
function selectFrequency(){

    data.products.forEach(elem => {
      
        elem.frequency.forEach(fre =>{
            var arr = data.haufigkeit;
            if(arr.some(arr => arr.id == fre))
                result.push(fre);
        })
    });
    return result;
}

console.log(selectFrequency());
...