Create a list that starts with a header determined by an object's attribute within an array

Question

Create a list that starts with a header determined by an object's attribute within an array

Currently in Vue, I am attempting to create a list based on a specific property within an object. The array being retrieved from the vuex store is structured as follows:

const array = [
 { 
   name: "British title string"
   nationality: "British"
 },
 { 
   name: "Another title"
   nationality: "American"
 },
 { 
   name: "Name"
   nationality: "Dutch"
 },
{ 
   name: "Another american item"
   nationality: "American"
 },
];

The desired outcome involves presenting the data using v-for in the following manner:

<h2>British</h2>
<ul>
   <li>British title string</li>
</ul>

<h2>American</h2>
<ul>
   <li>Another title</li>
   <li>Another american item</li>
</ul>

<h2>Dutch</h2>
<ul>
   <li>Name</li>
</ul>

I have managed to sort the array by the nationality property through lodash _.sortBy resulting in an array sorted by nationality. However, my goal is to include an H2 element that displays the value of the respective nationality.

javascript arrays vue.js lodash

Answer 1

Answer №1

If you need to group multiple items by their nationality and then sort them, you can achieve this by using _.groupBy() followed by _.sortBy():

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  template: '#appTemplate',
  data: () => ({
    rawData: [{
        name: "British title string",
        nationality: "British"
      },
      {
        name: "Another title",
        nationality: "American"
      },
      {
        name: "Name",
        nationality: "Dutch"
      },
      {
        name: "Another american item",
        nationality: "American"
      }
    ]
  }),
  computed: {
    groupedItems() {
      return _.sortBy(
        _.map(
          _.groupBy(this.rawData, 'nationality'), 
          items => ({
            items,
            nationality: items[0].nationality
          })
        ), 
        ['nationality']
      );
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script type="text/template" id="appTemplate">
  <div>
    <template v-for="group in groupedItems">
      <h2 v-text="group.nationality" />
      <ul>
        <li v-for="(item, index) in group.items" :key="index" v-text="item.name" />
      </ul>
    </template>
  </div>
</script>
<div id="app"></div>

To simplify the grouping process for better readability, I have mapped the first item's nationality as the group's nationality (with the name items), but you could have directly used the nationality of item 0 in the template instead.
To illustrate, here is how you would do that:

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  template: '#appTemplate',
  data: () => ({
    rawData: [{
        name: "British title string",
        nationality: "British"
      },
      {
        name: "Another title",
        nationality: "American"
      },
      {
        name: "Name",
        nationality: "Dutch"
      },
      {
        name: "Another american item",
        nationality: "American"
      }
    ]
  }),
  computed: {
    groupedItems() {
      return _.sortBy(
        _.groupBy(this.rawData, 'nationality'), 
        ['0.nationality']
      );
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script type="text/template" id="appTemplate">
  <div>
    <template v-for="grouped in groupedItems">
      <h2 v-text="grouped[0].nationality" />
      <ul>
        <li v-for="(item, index) in grouped" :key="index" v-text="item.name" />
      </ul>
    </template>
  </div>
</script>
<div id="app"></div>

Both examples above generate the necessary markup. If you want each item to have its own wrapper, you can replace <template> with an html tag and add keys. For example:

<article v-for="(grouped, key) in groupedItems" :key="key">

Answer 2

If you need to group multiple items by their nationality and then sort them, you can achieve this by using _.groupBy() followed by _.sortBy():

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  template: '#appTemplate',
  data: () => ({
    rawData: [{
        name: "British title string",
        nationality: "British"
      },
      {
        name: "Another title",
        nationality: "American"
      },
      {
        name: "Name",
        nationality: "Dutch"
      },
      {
        name: "Another american item",
        nationality: "American"
      }
    ]
  }),
  computed: {
    groupedItems() {
      return _.sortBy(
        _.map(
          _.groupBy(this.rawData, 'nationality'), 
          items => ({
            items,
            nationality: items[0].nationality
          })
        ), 
        ['nationality']
      );
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script type="text/template" id="appTemplate">
  <div>
    <template v-for="group in groupedItems">
      <h2 v-text="group.nationality" />
      <ul>
        <li v-for="(item, index) in group.items" :key="index" v-text="item.name" />
      </ul>
    </template>
  </div>
</script>
<div id="app"></div>

To simplify the grouping process for better readability, I have mapped the first item's nationality as the group's nationality (with the name items), but you could have directly used the nationality of item 0 in the template instead.
To illustrate, here is how you would do that:

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  template: '#appTemplate',
  data: () => ({
    rawData: [{
        name: "British title string",
        nationality: "British"
      },
      {
        name: "Another title",
        nationality: "American"
      },
      {
        name: "Name",
        nationality: "Dutch"
      },
      {
        name: "Another american item",
        nationality: "American"
      }
    ]
  }),
  computed: {
    groupedItems() {
      return _.sortBy(
        _.groupBy(this.rawData, 'nationality'), 
        ['0.nationality']
      );
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script type="text/template" id="appTemplate">
  <div>
    <template v-for="grouped in groupedItems">
      <h2 v-text="grouped[0].nationality" />
      <ul>
        <li v-for="(item, index) in grouped" :key="index" v-text="item.name" />
      </ul>
    </template>
  </div>
</script>
<div id="app"></div>

Both examples above generate the necessary markup. If you want each item to have its own wrapper, you can replace <template> with an html tag and add keys. For example:

<article v-for="(grouped, key) in groupedItems" :key="key">

Answer 3

Answer №2

If the array is ordered, you can easily achieve this:

    const list = [
      {
        title: "Another item",
        category: "Fruit"
      },
      {
        title: "Second fruit item",
        category: "Fruit"
      },
      {
        title: "Vegetable name",
        category: "Vegetable"
      },
      {
        title: "Food item",
        category: "Meat"
      },

    ];
    const organizedList = [];
    var j = 0;
    for (var i = 0; i < list.length;) {
      console.log(list[i].title);
      organizedList.push({
        category: list[i].category,
        items: [list[i].title]
      });
      i++;
      while ( i < list.length && list[i].category === list[i - 1].category) {
        organizedList[j].items.push(list[i].title);
        i++;
      }
      j++;

    }
    console.log(organizedList);

In your HTML file:

<div v-for="element in organizedList">
  <h2>{{ element.category }}</h2>
  <ul>
    <li v-for="item in element.items">
      {{ item.title }}
    </li>
  </ul>
</div>

Answer 4

If the array is ordered, you can easily achieve this:

    const list = [
      {
        title: "Another item",
        category: "Fruit"
      },
      {
        title: "Second fruit item",
        category: "Fruit"
      },
      {
        title: "Vegetable name",
        category: "Vegetable"
      },
      {
        title: "Food item",
        category: "Meat"
      },

    ];
    const organizedList = [];
    var j = 0;
    for (var i = 0; i < list.length;) {
      console.log(list[i].title);
      organizedList.push({
        category: list[i].category,
        items: [list[i].title]
      });
      i++;
      while ( i < list.length && list[i].category === list[i - 1].category) {
        organizedList[j].items.push(list[i].title);
        i++;
      }
      j++;

    }
    console.log(organizedList);

In your HTML file:

<div v-for="element in organizedList">
  <h2>{{ element.category }}</h2>
  <ul>
    <li v-for="item in element.items">
      {{ item.title }}
    </li>
  </ul>
</div>

Create a list that starts with a header determined by an object's attribute within an array

Answer №1

Answer №2

Similar questions

The variable (form.onsubmit) remains unset even after assigning a value

Tips for revealing a hidden div by clicking on another div?

How to locate the index.js file within my application using Node.js?

Is there a way to assign each MySQL result to a separate variable while maintaining just one connection to the database?

Transform uploaded image file into a blob format and store it in a VueJS database

Communication between Angular Controller and Nodejs Server for Data Exchange

Testing the updated version 18 of Create React APP index.js using Jest

Image transformed by hovering effect

Having trouble with the rendering of the Stripe Element Quickstart example

Having issues with Vue.js and the splice method not functioning properly on an array row

Tips for customizing your MUI slider design

What is the method to retrieve the exact value of {match.params.id} in React Router?

Getting variables from different functions in Python can be achieved by using the return

Is it feasible to access a variable outside the scope of a function if it is initially created within the scope of another function that returns a function using that same variable?

Struggling to successfully toggle the visibility of items

Problems with Google Maps Event Tracker

The React loader fails to function properly when used with nested routes

What is the best way to prevent a jQuery hover event from adding a text-shadow to the CSS?

Bypassing the "Your connection is not private" error in NodeJS + Express with fetch() using Javascript

I'm encountering difficulties in utilizing Ajax to upload images