Search for elements in a separate array using Vue's filtering function

Question

Search for elements in a separate array using Vue's filtering function

I have two arrays that I receive data from the backend. One contains city information and the other contains delivery times.

First:

cityArray: {
 type: Array,
 default: () => []
},

Second:

deliveryTimeArray:  {
 type: Array,
 default: () => []
}

The data comes in a regular array format, with key-value pairs. For example,

CityArray: [{"name": "Boston"}, {"name":"Detroit"}, {""}];

and DeliveryTimeArray:

[{"name": "Detroit","delivery_time: "2-7""},{"name": "Boston","delivery_time": "1-3"},{"}]

) If the city names match, I need to display the corresponding delivery time.

I attempted the following:

<div v-for='(city, index) in deliveryTimeArray' :key='index' > 
  <span :class='{ "city": findDeliveryTime(city) }'> {{ city }} </span>
</div>
///////////////
findDeliveryTime(city) {
  return this.cityArray.includes(city);
}

This code successfully finds matching cities, but I am unsure how to reference the delivery_time

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Each of the elements in the array contains the region name within the name property. Therefore, the function findTime() must extract this property from both this.region[] and from reg (i.e., the element in the deliveryTime[] array).

Utilize Array.prototype.some() to compare each region's name with the delivery time's region:

export default {
  methods: {
    findTime(reg) {
      return this.region.some(r => r.name === reg.name)
    }
  }
}

To conditionally show the item, incorporate v-if into your template:

<span v-if="findTime(reg)">{{ reg.name }}</span>

demo 1

Alternatively, another approach to tackle the issue is to calculate the filtered results:

<template>
  <div v-for='(reg, index) in computedDeliveryTime'>
    <span> {{ reg.name }} </span>
  </div>
</template>

<script>
export default {
  computed: {
    computedDeliveryTime() {
      return this.deliveryTime.filter(d => {
        return this.region.some(r => r.name === d.name)
      })
    }
  }
}
</script>

demo 2

Answer 2

Each of the elements in the array contains the region name within the name property. Therefore, the function findTime() must extract this property from both this.region[] and from reg (i.e., the element in the deliveryTime[] array).

Utilize Array.prototype.some() to compare each region's name with the delivery time's region:

export default {
  methods: {
    findTime(reg) {
      return this.region.some(r => r.name === reg.name)
    }
  }
}

To conditionally show the item, incorporate v-if into your template:

<span v-if="findTime(reg)">{{ reg.name }}</span>

demo 1

Alternatively, another approach to tackle the issue is to calculate the filtered results:

<template>
  <div v-for='(reg, index) in computedDeliveryTime'>
    <span> {{ reg.name }} </span>
  </div>
</template>

<script>
export default {
  computed: {
    computedDeliveryTime() {
      return this.deliveryTime.filter(d => {
        return this.region.some(r => r.name === d.name)
      })
    }
  }
}
</script>

demo 2

Search for elements in a separate array using Vue's filtering function

Answer №1

Similar questions

An issue arose when executing a script in elastic search, resulting in a gateway timeout error

"Exploring the concept of master pages in web development with the combination

unable to display preview images using the youtubev3 API

Updating the background color of several tags with jQuery

How to isolate a function in React when mapping data

What is the timing for the execution of top-level non-export code in TypeScript?

How can you tackle this issue without relying on 'arguments' and instead using the rest parameter syntax?

What is the most effective method for invoking an inherited method (via 'props') in ReactJS?

Is there a way to transfer a JavaScript variable created by an API to a PHP variable within a form submission?

Understanding the expiration date of a product

The submission of FormData to the PHP server is causing an issue

How to monitor and respond to HTML modifications in a child component from a parent component in Angular framework

Raycast in Three.js is struggling to locate object

Unexpected JSON data submission

The use of set.has in filtering does not produce the desired outcome

How to confirm the parent state in Angular's UI router?

delete the final directory from a file directory

What is the best way to refresh updated .js files directly from the browser console?

Unable to connect Dropzone to dynamically loaded DIV using AJAX

Is an audio player/playlist necessary for showcasing a mix engineer's skills in their