Iterate over a Vue.js dynamic array and place each object component into individual divs within a separate component based on a specific value associated with each object

Question

Iterate over a Vue.js dynamic array and place each object component into individual divs within a separate component based on a specific value associated with each object

I'm currently developing a Vue app that showcases company offices categorized by regions. My setup includes a main home view, an offices component, and an office item component. Utilizing v-for in the offices component allows me to iterate through the office items and display them successfully. However, I face a challenge when attempting to sort the office items into distinct divs based on the "Region" value, which spans across 5 regions.

While I understand how to import components into one another, my struggle lies in looping through all the office items within the offices component. My intuition suggests implementing a loop within a loop, but I wonder if there's a missing component in this equation?

office item component:

<div class="office" :class="office.Region">
  <p>{{office.Name}}</p>
  <p>{{office.Address}}</p>
  <p>{{office.Country}}</p>
  <p>{{office.Region}}</p>
  <p>{{office.Email}}</p>
  <p>{{office.Phone}}</p>
</div>

offices component:

<div>
  <div v-for="office in offices" :key="office.name">
    <div class="office-container global" v-if="office.Region === 'Global'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>
    <div class="office-container north" v-if="office.Region === 'North America'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>
    <div class="office-container europe" v-if="office.Region === 'Europe, Middle East and Africa'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>         
    <div class="office-container asia" v-if="office.Region === 'Asia Pacific'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>
    <div class="office-container latin" v-if="office.Region === 'Latin America'">
      <ul>
        <li><OfficeItem v-bind:office="office"/></li>
      </ul>
    </div>
  </div>
</div>

a hardcoded array of objects:

offices: [
    {
      Name: "Corporate Headquarters",
      Address: "Suite 500, 698 West 10000 South, South Jordan, Utah 84095",
      Country: "USA",
      Region: "Global",
      Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3e3233293c3e291d342b3c332934733e3230">[email protected]</a>",
      Phone: "+1-888-253-6201"
    },
    {
      Name: "EMEA Headquarters",
      Address: "First Floor Europa House, Harcourt Street Dublin 2, D02 WR20",
      Country: "Ireland",
      Region: "Europe, Middle East and Africa",
      Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa9a5a4bebaaabfaaaeb7a8abbab0adaae6aba7a5">[email protected]</a>",
      Phone: "+ 353 1 411 7100"
    },
    {
      Name: "India",
      Address: "Bagmane Tech Park, Unit No. 4A, Level 2 , Bangalore",
      Country: "India",
      Region: "Asia Pacific",
      Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593a36372d383a2d193129393236733e3032">[email protected]</a>",
      Phone: ""
    },
    {
      Name: "Brazil",
      Address: "Borges de Figueiredo, 303 - 4th floor, Bairro Mooca, São Paulo, SP 03110-010",
      Country: "Brazil",
      Region: "Latin America",
      Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32515d5c465351461f51434c5359404954564b59125f5351">[email protected]</a>",
      Phone: "+55 11 9 8136 0343"
    },
    {
      Name: "United States (Seattle)",
      Address: "1011 Western Ave SW #700, Seattle, WA 98104",
      Country: "United States",
      Region: "North America",
      Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24474b4a50454750644542477a5d40484248454fc4924f434550">[email protected]</a>",
      Phone: "+1-206-274-4280"
    }
]

I aim for only 5 office-container divs containing corresponding office listings. However, the issue at hand is multiple occurrences of office-container (like two North America divs) with additional empty divs nested inside.

javascript arrays loops vue.js vue-component

Answer 1

Answer №1

Extracting all regions from your list of offices is made simple with

[...new Set(this.offices.map(o => o.Region))]

.

To display offices by region, you can create a filtering method:

officesOfRegion(region) {
  return this.offices.filter(o => o.Region === region)
},

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#hook',
  template: '#appTemplate',
  data: ({
    offices: [{...
    
      ...
      
    ]
  }),
  computed: {
    regions() {
      return [...new Set(this.offices.map(o => o.Region))]
    }
  },
  methods: {
    officesOfRegion(region) {
      return this.offices.filter(o => o.Region === region)
    },
    displayJson(o) {
      return JSON.stringify(o, null, 2);
    }
  },

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/template" id="appTemplate">
  <div id="app">
    <div class="region" v-for="region in regions" :key="region">
      <hr>
      <h3 v-text="region"></h3>
      <ul>
        <li v-for="(office, i) in officesOfRegion(region)" :key="i">
          <pre v-html="displayJson(office)"></pre>
        </li>
      </ul>
    </div>
  </div>
</script>
<div id="hook"></div>

Your markup structure doesn't restrict how this information is presented. Feel free to customize it as needed.

And here’s the code snippet integrated with your markup for reference:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#hook',
  template: '#appTemplate',
  data: ({...
  
  ...
  
}),
computed: {...
methods: {
propsOf(o) {
return Object.keys(o);
}
},

})

.office p {
  display: flex;
}
.office p strong {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/template" id="appTemplate">
  <div id="app">
    <div class="region" v-for="region in regions" :key="region">
      <hr>
      <hr>
      <h3>{{region}}</h3>
      <div v-for="(office, i) in officesOfRegion(region)" :key="i" class="office">
        <hr>
        <p v-for="prop in propsOf(office)"><strong>{{prop}}:</strong> {{office[prop]}}</p>
      </div>
    </div>
  </div>
</script>
<div id="hook"></div>

Answer 2

Extracting all regions from your list of offices is made simple with

[...new Set(this.offices.map(o => o.Region))]

.

To display offices by region, you can create a filtering method:

officesOfRegion(region) {
  return this.offices.filter(o => o.Region === region)
},

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#hook',
  template: '#appTemplate',
  data: ({
    offices: [{...
    
      ...
      
    ]
  }),
  computed: {
    regions() {
      return [...new Set(this.offices.map(o => o.Region))]
    }
  },
  methods: {
    officesOfRegion(region) {
      return this.offices.filter(o => o.Region === region)
    },
    displayJson(o) {
      return JSON.stringify(o, null, 2);
    }
  },

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/template" id="appTemplate">
  <div id="app">
    <div class="region" v-for="region in regions" :key="region">
      <hr>
      <h3 v-text="region"></h3>
      <ul>
        <li v-for="(office, i) in officesOfRegion(region)" :key="i">
          <pre v-html="displayJson(office)"></pre>
        </li>
      </ul>
    </div>
  </div>
</script>
<div id="hook"></div>

Your markup structure doesn't restrict how this information is presented. Feel free to customize it as needed.

And here’s the code snippet integrated with your markup for reference:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#hook',
  template: '#appTemplate',
  data: ({...
  
  ...
  
}),
computed: {...
methods: {
propsOf(o) {
return Object.keys(o);
}
},

})

.office p {
  display: flex;
}
.office p strong {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/template" id="appTemplate">
  <div id="app">
    <div class="region" v-for="region in regions" :key="region">
      <hr>
      <hr>
      <h3>{{region}}</h3>
      <div v-for="(office, i) in officesOfRegion(region)" :key="i" class="office">
        <hr>
        <p v-for="prop in propsOf(office)"><strong>{{prop}}:</strong> {{office[prop]}}</p>
      </div>
    </div>
  </div>
</script>
<div id="hook"></div>

Answer 3

Answer №2

It appears that the only thing changing in your template is the classes surrounding the OfficeItem Component.

To prevent repetition in your code, consider implementing the conditional logic inside the OfficeItem Component as shown below:

// OfficeItem.vue
<template>
  <li :class="['office-container', getRegionClass(office.Region)]">{{office.Region}}</li>
</template>

<script>
const regional_classes = {
  A: 'class_a and-another-A-class',
  B: 'class_b and-another-B-class',
  C: 'class_c and-another-C-class',
  D: 'class_d and-another-D-class',
  Z: 'class_z and-another-Z-class'
}

export default {
  name: "OfficeItem",
  props: {
    office: Object
  },
  methods: {
    getRegionClass(region) {
      return regional_classes[region] || ''
    }
  }
};
</script>

Alternatively, you could use a switch statement to determine the appropriate class based on the Region.

In this case, I believe utilizing a regional_class Object is more readable and maintainable.

In your Offices component, simply pass the office object to your Officeitem like so:

// Offices.vue
<template>
  <div>
    <ul :key="`${regionName}_${index}`" v-for="(region, regionName, index) in officesByRegion">
      <h1>Region {{regionName}}</h1>
      <OfficeItem v-for="office in region" :key="office.Region" :office="office"/>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Offices",
  data() {
    return {
      offices: [
        { Region: "A" },
        { Region: "B" },
        { Region: "C" },
        { Region: "D" },
        { Region: "Z" },
        { Region: "A" },
        { Region: "B" },
        { Region: "A" },
        { Region: "B" },
        { Region: "A" },
        { Region: "Z" },
        { Region: "C" },
        { Region: "D" },
        { Region: "E" }
      ]
    };
  },
  computed: {
    officesByRegion() {
      const obj = {};
      this.offices.forEach(o => {
        if (o.Region in obj) obj[o.Region].push(o);
        else obj[o.Region] = [o];
      });
      return obj;
    }
  }
};
</script>

I trust this will be beneficial in understanding dynamic css class application. :-)

Answer 4

It appears that the only thing changing in your template is the classes surrounding the OfficeItem Component.

To prevent repetition in your code, consider implementing the conditional logic inside the OfficeItem Component as shown below:

// OfficeItem.vue
<template>
  <li :class="['office-container', getRegionClass(office.Region)]">{{office.Region}}</li>
</template>

<script>
const regional_classes = {
  A: 'class_a and-another-A-class',
  B: 'class_b and-another-B-class',
  C: 'class_c and-another-C-class',
  D: 'class_d and-another-D-class',
  Z: 'class_z and-another-Z-class'
}

export default {
  name: "OfficeItem",
  props: {
    office: Object
  },
  methods: {
    getRegionClass(region) {
      return regional_classes[region] || ''
    }
  }
};
</script>

Alternatively, you could use a switch statement to determine the appropriate class based on the Region.

In this case, I believe utilizing a regional_class Object is more readable and maintainable.

In your Offices component, simply pass the office object to your Officeitem like so:

// Offices.vue
<template>
  <div>
    <ul :key="`${regionName}_${index}`" v-for="(region, regionName, index) in officesByRegion">
      <h1>Region {{regionName}}</h1>
      <OfficeItem v-for="office in region" :key="office.Region" :office="office"/>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Offices",
  data() {
    return {
      offices: [
        { Region: "A" },
        { Region: "B" },
        { Region: "C" },
        { Region: "D" },
        { Region: "Z" },
        { Region: "A" },
        { Region: "B" },
        { Region: "A" },
        { Region: "B" },
        { Region: "A" },
        { Region: "Z" },
        { Region: "C" },
        { Region: "D" },
        { Region: "E" }
      ]
    };
  },
  computed: {
    officesByRegion() {
      const obj = {};
      this.offices.forEach(o => {
        if (o.Region in obj) obj[o.Region].push(o);
        else obj[o.Region] = [o];
      });
      return obj;
    }
  }
};
</script>

I trust this will be beneficial in understanding dynamic css class application. :-)

Iterate over a Vue.js dynamic array and place each object component into individual divs within a separate component based on a specific value associated with each object

Answer №1

Answer №2

Similar questions

Node and Web scraping Promise: a powerful combination

Creating a button that includes a link and a variable

How to effectively modify a worldwide array within a recursive function

Anomaly observed in the deconstruction of Material UI table components

Guide to making a dynamic hyperlink in VueJS using filtered or modified data

It is essential for Jquery to properly evaluate the first JSON result, as skipping

Concealing a navigation tab with Angular4 in Typescript: A tutorial

embedding JSON data into the main template

Exploring new possibilities in ChartJS with the use of multiple Y

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

Issue encountered: ENOENT - There is no file or directory located at the specified path for ... .steampath

Refreshing an array in Javascript

Is there a way to bring in both a variable and a type from a single file in Typescript?

Concealing or revealing an image with jQuery when hovering

Eliminating unnecessary symbols in asp.net with the help of Json

Table header sticking does not work when overflow is set to scroll or auto

Having trouble retrieving the data from a post request in Express

What is the best way to add an element from a parent component to an array within a child component in a Vue 3 application?

What is the best way to prevent a fetch request from being initiated before the authentication token has been received

Ways to display a GIF image as a pop-up during data loading in an MVC application