Sort objects in array by key with lodash

Question

Hi Stack Overflow community!

I have the following test array:

let test = [{
    "searchQuery": "test",
    "resultsLoaded": -1,
    "offset": -1,
    "allResults": 10
}, {
    "metaData": {
        "type": "page-content",
        "image": true,
        "name": "lorem-ipsum",
        "rank": 10,
        "tags": ["website:lorem/ipsum"]
    },
    "componentData": {
        "header": "Lorem Ipsum",
        "path": "/content/asdf",
        "breadcrumbDouble": {
            "breadcrumbItem1": {
                "href": "lorem ipsum",
                "text": "lorem ipsum"
            },
            "breadcrumbItem2": {
                "href": "/content/asdf",
                "text": "Lorem Ipsum"
            }
        },
        "content": {
            "subheadline": "Lorem Ipsum",
            "img": {
                "alt": "",
                "imgSrc": "/content/dam/production/images/asdf.jpeg.imgTransformer/listPageItem/desktop/1511962617778/asdf.jpg"
            },
            "tags": [{
                "category": "lorem",
                "value": "ipsum"
            }]
        }
    }
}, {
    "metaData": {
        "type": "page-content",
        "image": true,
        "name": "lorem-ipsum",
        "rank": 50,
        "tags": ["website:lorem/ipsum"]
    },
    "componentData": {
        "header": "Lorem Ipsum",
        "path": "/content/asdf",
        "breadcrumbDouble": {
            "breadcrumbItem1": {
                "href": "lorem ipsum",
                "text": "lorem ipsum"
            },
            "breadcrumbItem2": {
                "href": "/content/asdf",
                "text": "Lorem Ipsum"
            }
        },
        "content": {
            "subheadline": "Lorem Ipsum",
            "img": {
                "alt": "",
                "imgSrc": "/content/dam/production/images/asdf.jpeg.imgTransformer/listPageItem/desktop/1511962617778/asdf.jpg"
            },
            "tags": [{
                "category": "lorem",
                "value": "ipsum"
            }]
        }
    }
}, {
    "metaData": {
        "type": "page-content",
        "image": true,
        "name": "lorem-ipsum",
        "rank": 30,
        "tags": ["website:lorem/ipsum"]
    },
    "componentData": {
        "header": "Lorem Ipsum",
        "path": "/content/asdf",
        "breadcrumbDouble": {
            "breadcrumbItem1": {
                "href": "lorem ipsum",
                "text": "lorem ipsum"
            },
            "breadcrumbItem2": {
                "href": "/content/asdf",
                "text": "Lorem Ipsum"
            }
        },
        "content": {
            "subheadline": "Lorem Ipsum",
            "img": {
                "alt": "",
                "imgSrc": "/content/dam/production/images/asdf.jpeg.imgTransformer/listPageItem/desktop/1511962617778/asdf.jpg"
            },
            "tags": [{
                "category": "lorem",
                "value": "ipsum"
            }]
        }
    }
}];

What I want to achive now is to sort the objects by metaData.rank from highest to lowest.

I wanted to use lodash's orderBy() like this:

let result = orderBy(test, function(e) {
    let array = parseInt(e.metaData.rank);
    return array;
}, ['desc']);

But I get the following error:

TypeError: Cannot read property 'rank' of undefined

console.log(e) in my orderBy function shows me this:

{
    searchQuery: 'test',
    resultsLoaded: -1,
    offset: -1,
    allResults: 10
}

Any quick suggestions to fix this?

I know that the first object is causing the problem because of the different structure. So I need to work around it!

@mrks Is the different object always in the first position? Could be more of it in the same array? — ibrahim mahrir
– ibrahim mahrir, Commented Nov 29, 2017 at 16:01

Nina Scholz · Accepted Answer · 2017-11-29 15:58:59Z

2

You could move the items without metaData property to top and sort the rest by rank.

var array = [{ searchQuery: "test", resultsLoaded: -1, offset: -1, allResults: 10 }, { metaData: { type: "page-content", image: true, name: "lorem-ipsum", rank: 10, tags: ["website:lorem/ipsum"] }, componentData: { header: "Lorem Ipsum", path: "/content/asdf", breadcrumbDouble: { breadcrumbItem1: { href: "lorem ipsum", text: "lorem ipsum" }, breadcrumbItem2: { href: "/content/asdf", text: "Lorem Ipsum" } }, content: { subheadline: "Lorem Ipsum", img: { alt: "", imgSrc: "/content/dam/production/images/asdf.jpeg.imgTransformer/listPageItem/desktop/1511962617778/asdf.jpg" }, tags: [{ category: "lorem", value: "ipsum" }] } } }, { metaData: { type: "page-content", image: true, name: "lorem-ipsum", rank: 50, tags: ["website:lorem/ipsum"] }, componentData: { header: "Lorem Ipsum", path: "/content/asdf", breadcrumbDouble: { breadcrumbItem1: { href: "lorem ipsum", text: "lorem ipsum" }, breadcrumbItem2: { href: "/content/asdf", text: "Lorem Ipsum" } }, content: { subheadline: "Lorem Ipsum", img: { alt: "", imgSrc: "/content/dam/production/images/asdf.jpeg.imgTransformer/listPageItem/desktop/1511962617778/asdf.jpg" }, tags: [{ category: "lorem", value: "ipsum" }] } } }, { metaData: { type: "page-content", image: true, name: "lorem-ipsum", rank: 30, tags: ["website:lorem/ipsum"] }, componentData: { header: "Lorem Ipsum", path: "/content/asdf", breadcrumbDouble: { breadcrumbItem1: { href: "lorem ipsum", text: "lorem ipsum" }, breadcrumbItem2: { href: "/content/asdf", text: "Lorem Ipsum" } }, content: { subheadline: "Lorem Ipsum", img: { alt: "", imgSrc: "/content/dam/production/images/asdf.jpeg.imgTransformer/listPageItem/desktop/1511962617778/asdf.jpg" }, tags: [{ category: "lorem", value: "ipsum" }] } } }];

array.sort(function (a, b) {
    return ('metaData' in a) - ('metaData' in b) || b.metaData.rank - a.metaData.rank;
});

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Nov 29, 2017 at 15:58

answered Nov 29, 2017 at 15:56

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

2 Comments

mrks Over a year ago

Do you have an idea how to adapt your solution to check first for the rank and if, for example, two objects have the same rank to order them by alphabet componentData.header?

Nina Scholz Over a year ago

you could chain the next order criterium by using another logicla or at the end like ... || a.componentData.header > b.componentData.header || -(a.componentData.header < b.componentData.header) for a sorting by alphabet (it works even for numbers as well).

ibrahim mahrir · Accepted Answer · 2017-11-29 16:03:59Z

1

The first object in the array test is causing that problem. It doesn't have the same structure as the others. If e was that first object, then e.metaData is undefined.

I suggest you shift that first object, sort the array, then unshift it back to the sorted array:

let test = [...];

let first = test.shift();                                  // remove the first object from the array and store it in 'first'
test.sort((a, b) => b.metaData.rank - a.metaData.rank);    // sort the array (you can use orderBy here if you want)
test.unshift(first);                                       // unshift the first object (return it back to the first index of the array)

Note: The solution I suggested assumes there is only one different object and that this object always at the index 0.

edited Nov 29, 2017 at 16:03

answered Nov 29, 2017 at 15:55

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

2 Comments

31piy Over a year ago

This doesn't seem extendable. What if that element is at a different index? Rest two answers seem to be working with all scenarios.

ibrahim mahrir Over a year ago

@31piy I don't think that object could be at another position (it is a header object that describes the others). I'll ask OP for more clarification.

stasovlas · Accepted Answer · 2017-11-30 08:29:36Z

1

instead e.metaData.rank use:

_.get(e, ['metaData', 'rank'], /*value if rank field is not exist*/ -1);

answered Nov 30, 2017 at 8:29

stasovlas

7,4362 gold badges30 silver badges30 bronze badges

Collectives™ on Stack Overflow

Sort objects in array by key with lodash

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related