Adding additional objects to an array on conditions

Question

I'm trying to sort the following array of objects:

var input = [
          { name: 'Trevor Hansen', group: 'Group 1' },
          { name: 'Britta Holt', group: 'Group 2' },
          { name: 'Jane Smith ', group: 'Group 2' },
          { name: 'Sandra Adams', group: 'Group 1' },
          { name: 'Ali Connors', group: 'Group 1' },
          { name: 'John Smith', group: 'Group 2' },
          { name: 'Sandra Williams', group: 'Group 2' },
          { name: 'Tucker Smith', group: 'Group 1' },
        ],

This should be the result:

var result = [
          { header: 'Group 1' },
          { name: 'Sandra Adams', group: 'Group 1' },
          { name: 'Ali Connors', group: 'Group 1' },
          { name: 'Trevor Hansen', group: 'Group 1' },
          { name: 'Tucker Smith', group: 'Group 1' },
          { divider: true },
          { header: 'Group 2' },
          { name: 'Britta Holt', group: 'Group 2' },
          { name: 'Jane Smith ', group: 'Group 2' },
          { name: 'John Smith', group: 'Group 2' },
          { name: 'Sandra Williams', group: 'Group 2' },
        ],

After sorting the array, a header object needs to be added before each group followed by a divider object between groups but before a new header.

This is my current code, to sort the array:

function compare(a, b) {
        const valueA = a.group.toUpperCase();
        const valueB = b.group.toUpperCase();

        let comparison = 0;
        if (valueA > valueB) {
          comparison = 1;
        } else if (valueA < valueB) {
          comparison = -1;
        }
        return comparison;
      }

array.sort(compare);

But how can I add a header and divider at the right point when necessary?

Any help is very much appreciated!

pseudocode would like input.groupby(x=>x.group).orderby(x=>x.key).select(x=>x.prepend({header:x.key})).join({ divider: true }) — apple apple
– apple apple, Commented Mar 6, 2021 at 16:26
for the simple way, just loop through and add the divider and header. Do you encounter some specific problem? — apple apple
– apple apple, Commented Mar 6, 2021 at 16:29
use this to insert into index developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… (repost as english link) — apple apple
– apple apple, Commented Mar 6, 2021 at 17:41

muka.gergely · Accepted Answer · 2021-03-06 17:24:13Z

I would solve it with two reduce()s chained together.

const input = [{
    name: 'Trevor Hansen',
    group: 'Group 1'
  },
  {
    name: 'Britta Holt',
    group: 'Group 2'
  },
  {
    name: 'Jane Smith ',
    group: 'Group 2'
  },
  {
    name: 'Sandra Adams',
    group: 'Group 1'
  },
  {
    name: 'Ali Connors',
    group: 'Group 1'
  },
  {
    name: 'John Smith',
    group: 'Group 2'
  },
  {
    name: 'Sandra Williams',
    group: 'Group 2'
  },
  {
    name: 'Tucker Smith',
    group: 'Group 1'
  },
]


const groupItems = (arr) => {
  return arr.reduce((a, c) => {
    if (typeof a[c.group] === "undefined") a[c.group] = []
    a[c.group] = [...a[c.group], c]
    return a
  }, {})
}

const step1 = groupItems(input)

console.log(step1)

const insertHeaders = (obj) => {
  return Object.entries(obj).reduce((a, [key, vals], i, d) => {
    let r = [{
        header: key
      },
      ...vals,
    ]
    // this is needed to have the exact same array
    // that you presented as desirable output:
    // no divider at the last place
    if (i < d.length - 1) {
      r = [...r, {
        divider: true
      }]
    }
    a = [...a, ...r]
    return a
  }, [])
}

const step2 = insertHeaders(step1)
console.log(step2)

The benefit of this solution is that you don't need to know anything about the input, only that it has an attribute named group. Everything else is automatic:

groups are created based on the group attribute
items are placed after a header & before a divider (except the last group - that has no divider at the end)

But this brings out a question in me: why do you want to create an array like that? Using an array in this fashion is not the best idea in most cases. Groups are easily represented with an object, and there are functions to iterate over an object (for...in, Object.entries, etc.). If you need "headers" in the UI (e.g. table elements, etc.), it's better to move the header insertion in the displaying parts of the code (decouple from actual data) & only apply when you create the visuals. (Of course: not knowing much about your case, this solution can be totally sensible. :) )

Thanks for your answer. I really like the approach. I need this for displaying a list of users in a <v-autocomplete> dropdown menu in my Vue.js app using Vuetify.js. It works great now! I could add the headers like you mentioned in the displaying parts of the code. However, in my case this is easier and can also be used better throughout my application.

Collectives™ on Stack Overflow

Adding additional objects to an array on conditions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related