Vue - Compare two objects in array and display data if there is a match

Question

I have created a data array in Vue.js to help me build details of a list of counties in the UK. As a final step, I would like to create links between related county pages based on the data I have included in the array.

I would like to loop through the main county object and compare the items in closeby to the county name.

Currently, my data looks something like so:

createApp({
    data() {
        return {
            counties: [
                {
                    county: 'Bedfordshire',
                    link: 'example.com/link',
                    districts: [
                        { authority: "Bedford" },
                        { authority: "Luton" }
                    ],
                    cities: false,
                    coastal: false,
                    flag: true,
                    closeby: [
                        { county: 'Cambridgeshire' },
                        { county: 'Hertfordshire' },
                        { county: 'Buckinghamshire' },
                        { county: "Northamptonshire" }
                    ]
                },
                ...
            ],
        }
    }
}).mount('#app')

The array obviously goes on like this for each county, but I have trimmed it for ease of reading

and to spit out the section related to closeby I have:

<span v-for="(neighbour, index) in county.closeby">
    <span v-if="index !== 0 && index !== county.closeby.length - 1">, </span>
    <span v-if="index == county.closeby.length - 1 && county.closeby.length > 1"> and </span>
    {{ neighbour.county }}
</span>

This outputs: Cambridgeshire, Hertfordshire, Buckinghamshire and Northamptonshire

What I would like to do is include the link of each county alongside the county's relevant county name eg:

Cambridgeshire (example.com/link1), Hertfordshire (example.com/link2), Buckinghamshire (example.com/link3) and Northamptonshire (example.com/link4)

How do I compare the items in closeby to the link for each county in counties to enable them to be displayed? Bearing in mind the number of items in closeby will vary

Nikola Pavicevic · Accepted Answer · 2022-11-06 11:14:55Z

If I understood you correctly try to find the link in counties array:

const app = Vue.createApp({
  data() {
    return {
      counties: [
          {county: 'Bedfordshire', link: 'example.com/bedfordshire', districts: [{authority: "Bedford" },{authority: "Luton"}], cities: false, coastal: false, flag: true, closeby: [{county: 'Cambridgeshire' }, { county: 'Hertfordshire' }, { county: 'Buckinghamshire' }, { county: "Northamptonshire" }]},
          {county: 'Cambridgeshire', link: 'example.com/cambridgeshire', districts: [{authority: "Bedford" },{authority: "Luton"}], cities: false, coastal: false, flag: true, closeby: [{county: 'Bedfordshire' }, { county: 'Hertfordshire' }, { county: 'Buckinghamshire' }, { county: "Northamptonshire" }]},
          {county: 'Hertfordshire', link: 'example.com/hertfordshire', districts: [{authority: "Bedford" },{authority: "Luton"}], cities: false, coastal: false, flag: true, closeby: [{county: 'Bedfordshire' }, { county: 'Cambridgeshire' }, { county: 'Buckinghamshire' }, { county: "Northamptonshire" }]},
          {county: 'Northamptonshire', link: 'example.com/northamptonshire', districts: [{authority: "Bedford" },{authority: "Luton"}], cities: false, coastal: false, flag: true, closeby: [{county: 'Bedfordshire' }, { county: 'Cambridgeshire' }, { county: 'Buckinghamshire' }, { county: "Hertfordshire" }]},
      ],
    }
  },
  methods: {
    getLink(county) {
      return this.counties.find(c => c.county.toLowerCase() === county.toLowerCase())?.link
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(county, i) in counties" :key="i">
    <span v-for="(neighbour, index) in county.closeby" :key="index">
      <span v-if="index !== 0 && index !== county.closeby.length - 1">, </span>
      <span v-if="index == county.closeby.length - 1 && county.closeby.length > 1"> and </span>
      <a :href="getLink(neighbour.county)" :title="getLink(neighbour.county)">{{ neighbour.county }}</a>
    </span>
  </div>
</div>

Thank you, that worked a treat. The method was the thing I was missing.

Collectives™ on Stack Overflow

Vue - Compare two objects in array and display data if there is a match

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related