Sort through the array using a separate array in Vuejs

Question

Sort through the array using a separate array in Vuejs

I am currently working with two arrays:

 {
"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
    }
]
}

In my Vuejs application, I have a select dropdown where the products.name are dynamically rendered.

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

When a user selects a product like Jivi, I want to compare the numbers in the frequency array of the selected product with the id in the haufigkeit array. If there is a match, I need to display the corresponding name from the haufigkeit array.

Here is the code snippet I have been working on:

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

For the past two days, I have encountered an error stating

cannot read property 'every' of undefined

. Can someone please guide me on where I might have made a mistake?

javascript arrays vue.js vuejs3

Answer 1

Answer №1

Edit: After some more understanding, it seems like this solution should fit your needs: https://jsfiddle.net/q9grc04s/

By selecting a product, you will be able to see all haufigkeit values that have an ID corresponding to the selected frequency.

<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>

Note: Apologies for multiple edits, I'm still getting used to the stackoverflow editor. The link to the JS fiddle provided is a functional solution for your issue.

Answer 2

Edit: After some more understanding, it seems like this solution should fit your needs: https://jsfiddle.net/q9grc04s/

By selecting a product, you will be able to see all haufigkeit values that have an ID corresponding to the selected frequency.

<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>

Note: Apologies for multiple edits, I'm still getting used to the stackoverflow editor. The link to the JS fiddle provided is a functional solution for your issue.

Answer 3

Answer №2

If you want to check for the inclusion of an object in an array using Javascript, you can use a specific function. In the example below, I am retrieving the IDs from the 'haufigkeit' array that match the frequencies of the products.

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());

Answer 4

If you want to check for the inclusion of an object in an array using Javascript, you can use a specific function. In the example below, I am retrieving the IDs from the 'haufigkeit' array that match the frequencies of the products.

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());

Sort through the array using a separate array in Vuejs

Answer №1

Answer №2

Similar questions

Invoke Office script from beyond MS Excel WebApp

The command "npm run watch" is hanging

Converting PHP variables to JavaScript using AJAX and XML communication

transforming a text input into unadorned plain text

AngularJS UI.Router ActiveState implemented with a dropdown menu feature

Guide on sending AJAX requests from Javascript/React to Python REST API and receiving data

Sending a function along with event and additional arguments to a child component as a prop

Refresh the component data according to the vuex state

Combining multiple directories into a single output using the rollup command

The server is indicating that the validation for the user has failed due to the required field "foo" not being provided in the Node.js

KeyBy lodash method stores values in an object using the specified property as keys

Issue with CORS policy preventing Laravel 9 from running properly (XMLHttpRequest access blocked)

What steps can I take to create a textbox that expands as more text is

I'm baffled as to why this code isn't functioning properly

The React Context Value keeps coming back as undefined every time

"Enhancing JqGrid functionality with inline editing and custom formatters

Issue with continuous loader malfunction

Discover the magic of triggering events that dynamically alter CSS styles

Tips on successfully passing multiple keys and their associated HTML tag attributes in a React application

The callback in Jquery getJSON does not execute even when a valid JSON response is received