How to sort a nested array using lodash

Question

I have a collection of objects in this array and I need to order them by the 'order' key (asc). Is there a way to sort the objects inside the array and then return the whole array? I am relying on the order as I'm using it in a v-for with a :key.

[
    {
        "id":0,
        "type":"Header",
        "order":1,
        "props":{
            "order":0,
            "id":0,
            "section_id":0
        },
        "data":{
            "header":""
        },
        "component":"header-block"
    },
    {
        "id":1,
        "type":"Header",
        "order":0,
        "props":{
            "order":1,
            "id":1,
            "section_id":0
         },
         "data":{
            "header":""
         },
         "component":"header-block"
    }
],
[
    //Another collection of objects
]

I am currently doing this -

getters: {
        sorted: state => {
            return _.orderBy(state.experience_sections, function(block) {
                if(block.experience_blocks[0]) {
                    return block.experience_blocks[0].order;
                }
            });
        }
    }

The solution above does not seem to order the objects by 'asc' order. Am I on the right track?

Thanks!

P.S. Stack is telling me that is a possible duplicate question but I'm at a loss after hours of searching. My apologies if I missed an already answered question.

Akrion · Accepted Answer · 2018-11-25 01:27:59Z

You should also consider orderBy method from lodash since you could easily change from asc to desc sort order if you would want to at a later date or have it via a variable being passed through the UI etc:

const data = [ [{ "id": 0, "type": "Header", "order": 1, "props": { "order": 0, "id": 0, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" }, { "id": 1, "type": "Header", "order": 0, "props": { "order": 1, "id": 1, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" } ], [{ "id": 0, "type": "Header", "order": 2, "props": { "order": 0, "id": 0, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" }, { "id": 1, "type": "Header", "order": 1, "props": { "order": 1, "id": 1, "section_id": 0 }, "data": { "header": "" }, "component": "header-block" } ] ]

console.log('asc:', _.map(data, x => _.orderBy(x, 'order'))) // asc order
console.log('desc:', _.map(data, x => _.orderBy(x, 'order', 'desc'))) // desc

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

Nitish Narang · Accepted Answer · 2018-11-24 20:19:03Z

2

Just in case you want plain javascript solution.. using Array.forEach

I have also extended your array to contain more data

var arr = [[
    {
        "id":0,
        "type":"Header",
        "order":1,
        "props":{
            "order":0,
            "id":0,
            "section_id":0
        },
        "data":{
            "header":""
        },
        "component":"header-block"
    },
    {
        "id":1,
        "type":"Header",
        "order":0,
        "props":{
            "order":1,
            "id":1,
            "section_id":0
         },
         "data":{
            "header":""
         },
         "component":"header-block"
    }
], [
    {
        "id":0,
        "type":"Header",
        "order":2,
        "props":{
            "order":0,
            "id":0,
            "section_id":0
        },
        "data":{
            "header":""
        },
        "component":"header-block"
    },
    {
        "id":1,
        "type":"Header",
        "order":1,
        "props":{
            "order":1,
            "id":1,
            "section_id":0
         },
         "data":{
            "header":""
         },
         "component":"header-block"
    }
]]

arr.forEach(d => d.sort((a,b) => a.order - b.order))

console.log(arr)

edited Nov 24, 2018 at 20:19

answered Nov 24, 2018 at 20:11

Nitish Narang

4,2042 gold badges17 silver badges22 bronze badges

1 Comment

Nitish Narang Over a year ago

Bang on!! Returning new array will not do any good here.. so yes forEach can be apt here...

Jacek Lipiec · Accepted Answer · 2018-11-24 21:58:13Z

1

Will sort each subarray in an array

const sortedArr = _.map(arr, subArray => _.sortBy(subArray, "order"));

edited Nov 24, 2018 at 21:58

answered Nov 24, 2018 at 20:26

Jacek Lipiec

4323 silver badges10 bronze badges

Comments

pradeep gowda · Accepted Answer · 2019-01-21 11:10:28Z

0

Deep sorting using lodash

const sortedArray = _.orderBy(items, [(item) => {
    const nestedObj = _.get(item, 'props');
    item['props'] = _.orderBy(nestedObj,'order','desc');
  return item['order'];
}], 'desc');

answered Jan 21, 2019 at 11:10

pradeep gowda

6627 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to sort a nested array using lodash

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related