Dotted JavaScript property within an object

Question

Dotted JavaScript property within an object

Having trouble sorting an array of objects using the lodash orderBy function because it doesn't work when the iteratees contain a dot in the middle.

For a better understanding of the issue, check out this plunker. plunker

ar users = [
     { 'user': 'fred',   'age': 48 },
     { 'user': 'barney', 'age': 34 },
     { 'user': 'fred',   'age': 40 },
     { 'user': 'barney', 'age': 36 }
];

_.orderBy(users, ['user', 'age'], ['asc', 'desc']);

Any assistance on this issue would be greatly appreciated.

Thank you for your help.

javascript angularjs lodash

Answer 1

Answer №1

If you're looking to access exotic key names, one solution is to create a function specifically for that purpose.

const
    getPDot = o => o.value['p.'].val,
    data = [{ id: 'b', value: { 'p.': { val: 2 } } }, { id: 'a', value: { 'p.': { val: 1 } } }, { id: 'c', value: { 'p.': { val: 3 } } }];


console.log(_.orderBy(data, [getPDot], ['asc']));

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

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

An alternative is to take a dynamic approach using a closure over the key.

const
    getValue = key => o => o.value[key].val,
    data = [{ id: 'b', value: { 'p.': { val: 2 } } }, { id: 'a', value: { 'p.': { val: 1 } } }, { id: 'c', value: { 'p.': { val: 3 } } }];


console.log(_.orderBy(data, [getValue('p.')], ['asc']));

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

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

For those using ES5, a similar approach can be achieved with a function and closure over the key variable.

const
    getValue = function (key) {
        return function (o) {
            return o.value[key].val;
        };
    },
    data = [{ id: 'b', value: { 'p.': { val: 2 } } }, { id: 'a', value: { 'p.': { val: 1 } } }, { id: 'c', value: { 'p.': { val: 3 } } }];


console.log(_.orderBy(data, [getValue('p.')], ['asc']));

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

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

Answer 2

If you're looking to access exotic key names, one solution is to create a function specifically for that purpose.

const
    getPDot = o => o.value['p.'].val,
    data = [{ id: 'b', value: { 'p.': { val: 2 } } }, { id: 'a', value: { 'p.': { val: 1 } } }, { id: 'c', value: { 'p.': { val: 3 } } }];


console.log(_.orderBy(data, [getPDot], ['asc']));

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

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

An alternative is to take a dynamic approach using a closure over the key.

const
    getValue = key => o => o.value[key].val,
    data = [{ id: 'b', value: { 'p.': { val: 2 } } }, { id: 'a', value: { 'p.': { val: 1 } } }, { id: 'c', value: { 'p.': { val: 3 } } }];


console.log(_.orderBy(data, [getValue('p.')], ['asc']));

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

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

For those using ES5, a similar approach can be achieved with a function and closure over the key variable.

const
    getValue = function (key) {
        return function (o) {
            return o.value[key].val;
        };
    },
    data = [{ id: 'b', value: { 'p.': { val: 2 } } }, { id: 'a', value: { 'p.': { val: 1 } } }, { id: 'c', value: { 'p.': { val: 3 } } }];


console.log(_.orderBy(data, [getValue('p.')], ['asc']));

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

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

Dotted JavaScript property within an object

Answer №1

Similar questions

Assistance from Meteor for storing Cached Cursors

Using VueJS to showcase user input in a dynamic list and a pop-up modal

What is the best way to connect a Jquery plugin to a table within a partial view following an ajax request?

Problem with Angular-UI Bootstrap Tooltip

What are alternative methods to exchange data between two controllers besides using services and rootscope?

Issues with Implementing Scroll Directive in Angular JS

Utilizing Angular to fetch data via CORS from a Django Rest Framework backend with authorization restrictions

Is there a way to manage the state of a dictionary nested within a list using React JS?

Implementing automatic redirection upon clicking using React without the need for manual clicking

The logic behind combining elements from two arrays in JavaScript/TypeScript

In order to preserve the data inputted by the user within a file

React Select only enabling single selection at a time

Is it possible to target an iframe and display text simultaneously?

Image gradually disappears after being loaded via ajax request

What is the best way to simulate an unexported function in Javascript jest environments?

What is the most effective method for storing an object in React?

What is the best way to target the iframe within the wysihtml5 editor?

sending information to $modal in AngularUI

Ways to conceal ad container when ad space remains empty

Tips on adjusting a position that shifts with changes in window size