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

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

CodePudding user response：

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>