How can an array be grouped by two properties?

@ Bergi's answer is really practical, but I'll show you how you can create a multi-valued "key" using JavaScript primitives - don't assume that this means Bergi's answer is bad anyway; in fact, it is actually much better because of its practicality. Anyway, this answer exists to show you how much work is saved with an approach like his.

I'm going to beat the code in stages and then I will have a complete runnable demo at the end.

Combining composite data

Comparing composite data in JavaScript is a bit tricky, so we need to figure out how to do it first:

console.log([1,2] === [1,2]) // false
      

        
        
        
      

    

I want to highlight the multivalued key solution because our entire answer will be based on it - here I call it CollationKey

. Our key has some value and defines its own equality function which is used to compare keys

const CollationKey = eq => x => ({
  x,
  eq: ({x: y}) => eq(x, y)
})

const myKey = CollationKey (([x1, x2], [y1, y2]) =>
  x1 === y1 && x2 === y2)

const k1 = myKey([1, 2])
const k2 = myKey([1, 2])
console.log(k1.eq(k2)) // true
console.log(k2.eq(k1)) // true

const k3 = myKey([3, 4])
console.log(k1.eq(k3)) // false
      

        
        
        
      

    

wishful thinking

Now that we have a way to compare composite data, I want to create a custom shortening function that uses our multivalued key to group values ​​together. I will call this functioncollateBy

// key = some function that makes our key
// reducer = some function that does our reducing
// xs = some input array
const collateBy = key => reducer => xs => {
  // ...?
}

// our custom key;
// equality comparison of `group` and `question.templateId` properties
const myKey = CollationKey ((x, y) =>
  x.group === y.group
    && x.question.templateId === y.question.templateId)

const result =
  collateBy (myKey) // multi-value key
            ((group=[], x) => [...group, x]) // reducing function: (accumulator, elem)
            (arr) // input array

      

        
        
        
      

    

So now that we know how we want to work collateBy

, let's implement it

const collateBy = key => reducer => xs => {
  return xs.reduce((acc, x) => {
    const k = key(x)
    return acc.set(k, reducer(acc.get(k), x))
  }, Collation())
}

      

        
        
        
      

    

Sort data container

Okay, so we were a little optimistic about using Collation()

as the starting value for the call xs.reduce

. What should it be Collation

?

What do we know:

• someCollation.set
  
  takes a value CollationKey
  
  and some value and returns a new oneCollation
  
  
• someCollation.get
  
  takes CollationKey
  
  and returns some value

Okay, let's work!

const Collation = (pairs=[]) => ({
  has (key) {
    return pairs.some(([k, v]) => key.eq(k))
  },
  get (key) {
    return (([k, v]=[]) => v)(
      pairs.find(([k, v]) => k.eq(key))
    )
  },
  set (key, value) {
    return this.has(key)
      ? Collation(pairs.map(([k, v]) => k.eq(key) ? [key, value] : [k, v]))
      : Collation([...pairs, [key, value]])
  },
})

      

        
        
        
      

    

completion

So far, our function collateBy

returns a data container Collation

which is internally implemented with an array of pairs [key, value]

, but what we really want to return (as per your question) is just an array of values

Let's modify in the collateBy

slightest way that extracts the values ​​- changes to bold

const collateBy = key => reducer => xs => {
  return xs.reduce((acc, x) => {
    let k = key(x)
    return acc.set(k, reducer(acc.get(k), x))
  }, Collation()).values()
}
      

        
        
        
      

    

So now we will add a method values

to our containerCollation

values () {
  return pairs.map(([k, v]) => v)
}

      

        
        
        
      

    

runnable demo

That's all, so let it work for now - I used JSON.stringify

in the output to have deeply nested objects display all content

// data containers
const CollationKey = eq => x => ({
  x,
  eq: ({x: y}) => eq(x, y)
})

const Collation = (pairs=[]) => ({
  has (key) {
    return pairs.some(([k, v]) => key.eq(k))
  },
  get (key) {
    return (([k, v]=[]) => v)(
      pairs.find(([k, v]) => k.eq(key))
    )
  },
  set (key, value) {
    return this.has(key)
      ? Collation(pairs.map(([k, v]) => k.eq(key) ? [key, value] : [k, v]))
      : Collation([...pairs, [key, value]])
  },
  values () {
    return pairs.map(([k, v]) => v)
  }
})

// collateBy
const collateBy = key => reducer => xs => {
  return xs.reduce((acc, x) => {
    const k = key(x)
    return acc.set(k, reducer(acc.get(k), x))
  }, Collation()).values()
}

// custom key used for your specific collation
const myKey =
  CollationKey ((x, y) =>
    x.group === y.group
      && x.question.templateId === y.question.templateId)

// your data
const arr = [ { group: 1, question: { templateId: 100 } }, { group: 2, question: { templateId: 200 } }, { group: 1, question: { templateId: 100 } }, { group: 1, question: { templateId: 300 } } ]

// your answer
const result =
  collateBy (myKey) ((group=[], x) => [...group, x]) (arr)

console.log(result)
// [
//   [
//     {group:1,question:{templateId:100}},
//     {group:1,question:{templateId:100}}
//   ],
//   [
//     {group:2,question:{templateId:200}}
//   ],
//   [
//     {group:1,question:{templateId:300}}
//   ]
// ]
      

        
        
        
      

    

Summary

We've created a custom sort function that uses a multi-valued key to group our matched values ​​together. This was done using only JavaScript primitives and higher order functions. We now have a way to iterate through the dataset and randomly match using keys of any complexity.

If you have any questions about this, I will be happy to answer them ^ _ ^