ES6, Lodash sortBy 2 level array of objects

Question

Can't figure out how to sort this kind of structure:

[
  0: { text: 'Lorem', 'children': [ 0: { text: 'Ipsum of Lorem' } ... ] }
  ...
]

I can only sort by the first level like this: _.sortBy(myArray,'text')

I need something like _.sortBy(myArray, ['text','children.text']) this obviously doesn't work.

I need to sort by children.text of each item.

Or do you want to sort the array myArray based on the first index of the array children? — Ele
– Ele, Commented Aug 2, 2019 at 14:38
First I want to sort first level, I already done this like this: _.sortBy(myArray,'text') but additionally, I need to sort children of each first level item. — RomkaLTU
– RomkaLTU, Commented Aug 2, 2019 at 14:40
So, of the first level has two items with the same text, do the children then affect how that top level is sorted? — Cerbrus
– Cerbrus, Commented Aug 2, 2019 at 14:53

Ele · Accepted Answer · 2019-08-02 14:53:42Z

1

You should loop over the children array.

const myArray = [{ text: 'ZLorem', 'children': [{ text: 'Ipsum2' }, { text: 'Apsum2' }] },{ text: 'Lorem', 'children': [{ text: 'Ipsum1' }, { text: 'Zpsum1' }] }],
      result = _.sortBy(myArray, 'text');
      
result.forEach(o => {
  if (o.children) 
    o.children = _.sortBy(o.children, 'text');
});

console.log(result);

.as-console-wrapper { min-height: 100%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

edited Aug 2, 2019 at 14:53

answered Aug 2, 2019 at 14:47

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ori Drori · Accepted Answer · 2019-08-02 14:46:22Z

If you need to sort by the 1st item of the children array, you can use 'children[0].text':

const myArray = [
  { text: 'Lorem', 'children': [{ text: 'Ipsum2' }] },
  { text: 'Lorem', 'children': [{ text: 'Ipsum1' }] }
]

const result = _.sortBy(myArray, ['text','children[0].text'])

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

If you need to sort the children, and then use the 1st item, you can generate a function with _.flow(). The function starts by mapping each object, and sorting it's children, and then sorts the entire array:

const { flow, partialRight: pr, map, sortBy } = _

const fn = flow(
  pr(map, o => ({ ...o, children: sortBy(o.children, 'text') })),
  pr(sortBy, ['text','children[0].text'])
)

const myArray = [
  { text: 'Lorem', 'children': [{ text: 'Ipsum2' }, { text: 'Ipsum4' }] },
  { text: 'Lorem', 'children': [{ text: 'Ipsum3' }, { text: 'Ipsum1' }] }
]

const result = fn(myArray)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

And the same idea but terser with lodash/fp:

const { flow, map, sortBy } = _

const fn = flow(
  map(o => ({ ...o, children: sortBy('text', o.children) })),
  sortBy(['text','children[0].text'])
)

const myArray = [
  { text: 'Lorem', 'children': [{ text: 'Ipsum2' }, { text: 'Ipsum4' }] },
  { text: 'Lorem', 'children': [{ text: 'Ipsum3' }, { text: 'Ipsum1' }] }
]

const result = fn(myArray)

console.log(result)

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

William Gunawan · Accepted Answer · 2019-08-02 14:41:25Z

0

You can use for loop to trace the children and sort the children array.

_.sortBy(myArray, 'text');
for(let parent of myArray) {
    _.sortBy(parent.children, 'text');
}

This code should do like you want or you can create it as function

function sortParentAndChildren(myArray, key) {
    _.sortBy(myArray, key);
    for (let parent of myArray) {
        _.sortBy(parent.children, key);
    }
}

sortParentAndChildren(myArray, "text");

answered Aug 2, 2019 at 14:41

William Gunawan

7503 silver badges8 bronze badges

Collectives™ on Stack Overflow

ES6, Lodash sortBy 2 level array of objects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related