How do you loop thru array and create glossary list with categories

Question

I have an array with a list of definitions. Using Vue.js, what is the best way to loop through that array and create a glossary list with letters as the categories?

Desired Output:

A

• Aterm: A definition of aterm

B

• Bterm: A definition of bterm

C

• Cterm: A definition of cterm
• Cterm: A definition of cterm
• Cterm: A definition of cterm

Y

• Yterm: A definition of yterm
• Yterm: A definition of yterm

Z

• Zterm: A definition of zterm

<div id="app" class="container">
  <div v-for="(item, index) in fields" :key="index">
    <span>{{ item.Term.charAt(0) }}
    <h3>{{ item.Term }}</h3>
    <p>{{ item.Definition }}</p>
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Parent',
    fields: [
      { Term: 'Aterm', Definition: 'A definition for aterm' },
      { Term: 'Bterm', Definition: 'A definition for bterm' },
      { Term: 'Cterm', Definition: 'A definition for cterm' },
      { Term: 'Cterm', Definition: 'A definition for cterm' },
      { Term: 'Cterm', Definition: 'A definition for cterm' },
      { Term: 'Mterm', Definition: 'A definition for mterm' },
      { Term: 'Yterm', Definition: 'A definition for yterm' },
      { Term: 'Yterm', Definition: 'A definition for yterm' },
      { Term: 'Zterm', Definition: 'A definition for zterm' }
    ]
  },
  methods: {
    // do something
  }
})
</script>

Answer 1

This is the simplest way I can offer. I'll benefit lodash to solve the problem.

First, you need to import lodash on the top of the script code. It is a powerful tool for manipulating data structure based on my experience.

import * as _ from "https://cdn.skypack.dev/[email protected]";

You need to add this code:

methods: {
    sorting(item) {
      return _.mapValues(
        _.groupBy(item, function (e) {
          return e.Term;
        })
      );
    },
  },
computed: {
    terms() {
      return this.sorting(this.fields);
    },
}

Here, I made a computed variable to manipulate the variable called fields by calling the sorting function which implements lodash. I mapped the values and grouped them based on the Term field in the array.

Then, you need to restructure the html code:

<div id="app" class="container">
  <div v-for="(term, key, index) in terms" :key="index"> <!-- Replace fields with the computed variable terms, and access the keys -->
   <h4>{{ key.charAt(0) }}</h4> <!-- Call the key with the first Index -->
   <ul> <!-- Add this -->
     <li v-for="item in fields" :key="item.Term">
       <span>{{ item.Term }}:</span>
       <span>{{ item.Definition }}</span>
     </li>
   </ul>
  </div>
</div>

Codepen: https://codepen.io/auliaamir/pen/GROVJvr

Answer 2

Create a computed property that groups the fields alphabetically by letter (using Array.prototype.reduce() on this.fields[]):

new Vue({
  computed: {
    fieldsByLetter() {
      const groups = this.fields.reduce((p, field) => {
        const letter = field.Term.at(0).toUpperCase()  // use uppercase first letter
        p[letter] ??= []      // create array for this letter if needed
        p[letter].push(field) // add field to array
        return p              // return updated object
      }, {})

      // alphabetize fields by Term
      Object.values(groups).forEach(fields => fields.sort((a, b) => a.Term.localeCompare(b.Term)))

      return groups
    }
  },
})

Then iterate the computed object with v-for, rendering the object's fields[] with its own v-for, and each item in a <li> to get the desired output:

<div id="app" class="container">
  <div v-for="(fields, letter) in fieldsByLetter" :key="letter">
    <h3>{{ letter }}</h3>
    <ul>
      <li v-for="item in fields" :key="item.Term">
        <span>{{ item.Term }}:</span>
        <span>{{ item.Definition }}</span>
      </li>
    </ul>
  </div>
</div>

demo