Looping through data in Vue.js with a specific condition

Question

Looping through data in Vue.js with a specific condition

There is an object structured like this:

groupedContacts:

{
  4: [
      {name: 'foo'},
      {name: 'bar'}
    ],
  6: [
      {name: 'foo bar'},
    ]
}

Additionally, we have another array:

companyList.models:

models: [
  {id:4, name: 'company A'},
  {id:6, name: 'company B'},
]

The IDs in the companies correspond to keys in groupedContacts. One array contains company names and the other includes contact details for these companies.

The goal is to display them in multiple tables like so:

Table 1
Company A (id4)
- foo
- bar 

Table2 
Company B (id6)
- foo bar

Despite the following code, there are no errors but the tables do not show any contacts:

<div
    v-for="(company, key) in companyList.models"
    :key="key"
    class="table table--hover mt-4"
>
  <h4 class="mb-4" v-html="company.name" />
  <table>
    <thead>
      <tr>
        <th class="text-left" v-html="__t('name')" />
      </tr>
    </thead>
    <tbody
      v-for="(groupContacts, key) in groupedContacts"
      :key="key"
      v-if="company.id === key"
    >
      <tr
        v-for="(contact, contactKey) in groupContacts"
        :key="contactKey"
      >
        <td v-html="contact.name" />
      </tr>
    </tbody>
  </table>
</div>

View the result achieved in the browser by clicking on this link.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

A suggestion is to utilize a computed property named companies in the following manner:

 computed: {
        companies() {

          return this.models.map(c => {
            c.groups = this.groupContacts[c.id];
            return c;
          })
        }

      }

After that, you can iterate through it like so:

 <div v-for="(company, key) in companies" :key="key" class="table table--hover mt-4">
          <h4 class="mb-4">{{company.name}}</h4>

          <table>
            <thead>
              <tr>
                <th class="text-left">Name</th>

              </tr>
            </thead>
            <tbody>
              <tr v-for="(contact, contactKey) in company.groups" :key="contactKey">
                <td> {{contact.name}}</td>
              </tr>
            </tbody>
          </table>
        </div>

new Vue({
  el: '#app',

  data() {

    return {
      groupContacts:

      {
        4: [{
            name: 'foo'
          },
          {
            name: 'bar'
          }
        ],
        6: [{
          name: 'foo bar'
        }, ]
      },
      models: [{
          id: 4,
          name: 'company A'
        },
        {
          id: 6,
          name: 'company B'
        },
      ]
    }
  },
  computed: {
    companies() {

      return this.models.map(c => {
        c.groups = this.groupContacts[c.id];
        return c;
      })
    }

  }
})

<body>
  <div id="app">

    <div v-for="(company, key) in companies" :key="key" class="table table--hover mt-4">
      <h4 class="mb-4">{{company.name}}</h4>

      <table>
        <thead>
          <tr>
            <th class="text-left">Name</th>

          </tr>
        </thead>
        <tbody>
          <tr v-for="(contact, contactKey) in company.groups" :key="contactKey">
            <td> {{contact.name}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1563607055273b6d">[email protected]</a>/dist/vue.js"></script>

Answer 2

A suggestion is to utilize a computed property named companies in the following manner:

 computed: {
        companies() {

          return this.models.map(c => {
            c.groups = this.groupContacts[c.id];
            return c;
          })
        }

      }

After that, you can iterate through it like so:

 <div v-for="(company, key) in companies" :key="key" class="table table--hover mt-4">
          <h4 class="mb-4">{{company.name}}</h4>

          <table>
            <thead>
              <tr>
                <th class="text-left">Name</th>

              </tr>
            </thead>
            <tbody>
              <tr v-for="(contact, contactKey) in company.groups" :key="contactKey">
                <td> {{contact.name}}</td>
              </tr>
            </tbody>
          </table>
        </div>

new Vue({
  el: '#app',

  data() {

    return {
      groupContacts:

      {
        4: [{
            name: 'foo'
          },
          {
            name: 'bar'
          }
        ],
        6: [{
          name: 'foo bar'
        }, ]
      },
      models: [{
          id: 4,
          name: 'company A'
        },
        {
          id: 6,
          name: 'company B'
        },
      ]
    }
  },
  computed: {
    companies() {

      return this.models.map(c => {
        c.groups = this.groupContacts[c.id];
        return c;
      })
    }

  }
})

<body>
  <div id="app">

    <div v-for="(company, key) in companies" :key="key" class="table table--hover mt-4">
      <h4 class="mb-4">{{company.name}}</h4>

      <table>
        <thead>
          <tr>
            <th class="text-left">Name</th>

          </tr>
        </thead>
        <tbody>
          <tr v-for="(contact, contactKey) in company.groups" :key="contactKey">
            <td> {{contact.name}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1563607055273b6d">[email protected]</a>/dist/vue.js"></script>

Answer 3

Answer №2

Avoid combining v-if with v-for, as recommended in the Vue.js documentation (Vue.js docs).

Instead of mixing them, consider using a computed property following the suggestion from the documentation:

<template>
  <div>
    <div v-for="(company, i) in companyContacts" :key="`company_${i}`" class="table table--hover mt-4">
      <h4 class="mb-4" v-html="company.name" />
      <table>
        <thead>
          <tr>
            <th class="text-left" v-html="__t('name')" />
          </tr>
        </thead>
        <tbody>
          <tr v-for="(contact, j) in company.contacts" :key="`company_${i}_contact_${j}`">
            <td v-html="contact.name" />
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    companyContacts() {
      return this.companyList.models.map(model => {
        model.contacts = this.groupedContacts[model.id]
        return model
      })
    }
  },
  data: () => {
    groupedContacts: {
      4: [{
          name: 'foo'
        },
        {
          name: 'bar'
        }
      ],
      6: [{
        name: 'foo bar'
      }, ]
    },
    companyList: {
      models: [{
          id: 4,
          name: 'company A'
        },
        {
          id: 6,
          name: 'company B'
        },
      ]
    }
  }
}
</script>

I trust this information proves useful!

Answer 4

Avoid combining v-if with v-for, as recommended in the Vue.js documentation (Vue.js docs).

Instead of mixing them, consider using a computed property following the suggestion from the documentation:

<template>
  <div>
    <div v-for="(company, i) in companyContacts" :key="`company_${i}`" class="table table--hover mt-4">
      <h4 class="mb-4" v-html="company.name" />
      <table>
        <thead>
          <tr>
            <th class="text-left" v-html="__t('name')" />
          </tr>
        </thead>
        <tbody>
          <tr v-for="(contact, j) in company.contacts" :key="`company_${i}_contact_${j}`">
            <td v-html="contact.name" />
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    companyContacts() {
      return this.companyList.models.map(model => {
        model.contacts = this.groupedContacts[model.id]
        return model
      })
    }
  },
  data: () => {
    groupedContacts: {
      4: [{
          name: 'foo'
        },
        {
          name: 'bar'
        }
      ],
      6: [{
        name: 'foo bar'
      }, ]
    },
    companyList: {
      models: [{
          id: 4,
          name: 'company A'
        },
        {
          id: 6,
          name: 'company B'
        },
      ]
    }
  }
}
</script>

I trust this information proves useful!

Looping through data in Vue.js with a specific condition

Answer №1

Answer №2

Similar questions

Creating a dropdown menu in Vue 3: A step-by-step guide

The React Material-UI Slider does not move when OnChangeCommitted is triggered

Component does not detect change when the same number is sent as input

Instructions on how to showcase a standard text within a designated text container

Instructions on creating a countdown timer that reveals a hidden div once it reaches zero, remains visible for a set period, and then resets

Error encountered while attempting to render a form within a partial in Rails 5: "simple_fields_for" method is not defined for the SimpleForm::FormBuilder instance

JavaScript: CryptoJS does not have the SHA1 method implemented

In Vue, a computed property is rendered as regular text on the screen

Tips for querying MongoDB schemas that reference other schemas in the field?

Having trouble with Electron nodeIntegration functionality and experiencing some odd behavior in general with Electron

How can I display Vue object properties in the header section?

Guide to altering the color of a list item when hovering in HTML

Notifying asynchronous completion using Gulp, Babel, and configuration file config.yml

What are the steps to resolve the npm error message "npm ERR! code ELIFECYCLE"?

Saving an image and form data together in local storage can be accomplished by using JavaScript

What content appears post-iframe?

FullCalendar Angular 10 not displaying correct initial view

Implementing a dynamic navigation bar that expands and collapses on mouse hover in a React application

Three.js - Model is unable to cast shadows

IE8 triggers automatic download upon receiving JSON response using jQuery