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

I am facing difficulty showing JSON data using Vue.js

State variables in React hooks like useState always return the previous value before

Selenium Python Slider Button Element Visibility Issue

Changes in a portion of the state for Vaadin's AbstractJavascriptComponent

Capturing a res.send(404) error in ExpressJS during production: Tips and tricks

Learn how to retrieve data from a JSON server in Angular 8 and then sort that data in a table by utilizing checkboxes

Guide on utilizing VueJS plugins in the browser without any added layers

Issue with form validation, code malfunctioning

The Toggle Functionality necessitates a double-click action

Challenge with row identification in Datatables when rowId begins with a number

The jQuery selectors are not able to identify any dynamically generated HTML input elements

I was surprised by how Await behaved in if-else statements, it was not what

Issue with Angular 2 NgFor Pattern Error Message Display Absence

Enhancing data rendering by incorporating extra verifications through the logical AND operator to prevent crashes upon page refresh

The unusual behavior of the :to attribute on @click in Vue

The AWS Cognito User Interface utilizes a hash in order to incorporate parameters during its invocation of the callback page

Retrieve the attribute from the element that is in the active state

What is the best way to retrieve an item using a composite key?

JavaScript believes that the function is not defined, despite its clear existence

Ways to bypass mongoose schema validation while making an update request in the API