Determine in VueJS v-for loop if the previous element in the object has changed, such as switching cities

Question

Determine in VueJS v-for loop if the previous element in the object has changed, such as switching cities

I'm facing a dilemma here... I have an array structured like this:


[{'city':'LA','store':'Bobs Burgers'},{'city':'LA','store':'Burger King'},{'city':'Sacramento','store':'Jimmy Burger'}]

While iterating through these burger joints in a table, I need to insert a row whenever the city changes. How can I achieve this?

In PHP, the solution would look something like this:


<?php
foreach ($store in $burgerplaces){

if ($store['city']!=$prev_city){
   # display header for the city 
}

#print store info

$prev_city=$store['city'];

}
?>

javascript vue.js vuejs3

Answer 1

Answer №1

If I have correctly understood your instructions, you can achieve the desired outcome by using the code snippet below (in the computed property, sort your array first and then loop to compare cities and add an empty object before moving on to the next city):

new Vue({
  el: "#demo",
  data() {
    return {
      burgers: [{'city':'LA','store':'Bobs Burgers'},{'city':'Sacramento','store':'Jimmy Burger'},{'city':'LA','store':'Burger King'}, {'city':'NY','store':'Burgers'}]
    }
  },
  computed: {
    byCities() {
      const arr = this.burgers.sort((a,b) => {
        const nameA = a.city.toUpperCase();
        const nameB = b.city.toUpperCase(); 
        if (nameA < nameB) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
        return 0;
      })
      const res = []
      for(let i = 0; i < arr.length; i++){
        if (i ===0 || arr[i].city !== arr[i-1].city) {
          res.push({city: arr[i].city.toUpperCase()})
        }
        res.push(arr[i])
      }
      return res
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <li v-for="(burger, i) in byCities" :key="i">
    {{ burger.city }}  {{ burger.store }}
  </li>
</div>

Answer 2

If I have correctly understood your instructions, you can achieve the desired outcome by using the code snippet below (in the computed property, sort your array first and then loop to compare cities and add an empty object before moving on to the next city):

new Vue({
  el: "#demo",
  data() {
    return {
      burgers: [{'city':'LA','store':'Bobs Burgers'},{'city':'Sacramento','store':'Jimmy Burger'},{'city':'LA','store':'Burger King'}, {'city':'NY','store':'Burgers'}]
    }
  },
  computed: {
    byCities() {
      const arr = this.burgers.sort((a,b) => {
        const nameA = a.city.toUpperCase();
        const nameB = b.city.toUpperCase(); 
        if (nameA < nameB) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
        return 0;
      })
      const res = []
      for(let i = 0; i < arr.length; i++){
        if (i ===0 || arr[i].city !== arr[i-1].city) {
          res.push({city: arr[i].city.toUpperCase()})
        }
        res.push(arr[i])
      }
      return res
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <li v-for="(burger, i) in byCities" :key="i">
    {{ burger.city }}  {{ burger.store }}
  </li>
</div>

Determine in VueJS v-for loop if the previous element in the object has changed, such as switching cities

Answer №1

Similar questions

Dynamically changing click events in VueJS can be achieved using a combination of

In Snowflake, SQL error handling block fails to execute

Retrieve a collection of items based on their data-id attribute

Execute two different functions in AngularJS using ng-click in any order

Hinting the type for the puppeteer page

Stop Jade from collapsing the directory hierarchy

Encountering CORS issues, but rest assured I have it enabled

Transforming an array of flat data into a hierarchical tree structure

A guide on utilizing a looped event listener with a function to switch object textures in THREE.JS

Eliminate item from array based on certain criteria

Safari's anchor links tend to leap higher than necessary

Send pages to the holding page first before redirecting them to the appropriate page on the new website

Encountering a "Cannot read property 'addEventListener' of null" error while working on a dynamic table using JavaScript

Embed a Vaadin component within an element dynamically generated by a Javascript component

Seeking a way to access Json parse with special characters?

When attempting to access an API hosted on Cloudflare from Heroku, a 403 error is returned

Refresh a gif animation when the page is reloaded

Encountering a PDF loading error when integrating ReactPDF in a React project

At which location within the script should I insert the document.title in order to update the title every xx milliseconds?

Solution for problem with IE scrollWidth