How to access a grandchild's property using a string in JavaScript

Is there a way to access a property nested deep within an object when creating a custom sorting function?

I am attempting to implement a sort function that can sort an array based on a specific criteria.

const data = [
{
  a: {
    b: {
      c: 2
    }
  }
},
{
  a: {
    b: {
      c: 1
    }
  }
}
sortBy(array, criteria){
  array.sort((a,b) => {
    if (a[criteria] > b[criteria]) return 1;
    ...
  }
}

While I understand the current code does not function as intended, my goal is to be able to utilize sortyBy(data, "a.b.c").

Answer №1

Consider organizing your criteria as an array for better readability.

const items = [{
    category: {
      id: 3
    }
  },
  {
    category: {
      id: 1
    }
  }
]

const sortItemsByCriteria = (arr, criteria) => {
  getValue = (val) => {
    return criteria.reduce((acc, curr) => {
      return acc[curr];
    }, val);
  };

  arr.sort((item1, item2) => {
    return getValue(item1) > getValue(item2) ? 1 : -1
  });
};

sortItemsByCriteria(items, ["category", "id"]);
console.log(JSON.stringify(items, null, 2))

Answer №2

If you're looking for a convenient way to sort data, consider using lodash's _.sortBy function. Lodash is a well-established library with extensive testing, making it a reliable choice for handling sorting logic.

let data = [{  a: {    b: {      c: 2    }  }},{  a: {    b: {      c: 1    }  }}],
    sorted = _.sortBy(data, "a.b.c");

console.log(sorted);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a module loader in Angular.JS or do I have to rely on script tags for loading modules?

While using Angular JS, I have a desire to organize unrelated code in separate modules similar to AMD or CommonJS. However, my Google search for 'Angular.JS make new module' has not yielded any documentation on creating Angular.JS modules. There ...

Error Alert: JQuery Pop Up Issue

Struggling with getting my JQuery Pop-Up Box to work properly. Any guidance for a newbie like me on how to fix it would be greatly appreciated. Here's the code I've been working on: <!-- POP UP HTML --> <div class="infocontainer"> ...

"Troubleshooting: NuxtJs vue-flip feature stuck on front side, not rotating to

I have recently installed the vue-flip plugin in a NuxtJs (VueJS) project that I created using the command: npx create-nuxt-app <project-name>. In the index.vue file, I simply added: <vue-flip active-click="true"> <div slot="front"> ...

The Dialog feature offered by jQuery-UI

Having just started with jQuery, I am looking to implement the jQuery-UI Dialog to display a message containing lengthy text to the user. My goal is to have a "More details" link in each row of my HTML table that will trigger the jQuery Dialog window to op ...

The following 13 error occurred in the node_modules/next/dist/esm/server/web/spec-extension/cookies/serialize.js file

Every time I try to use the serialize function in my application on Next, it throws errors. Error - node_modules/next/dist/esm/server/web/spec-extension/cookies/serialize.js (40:0) @ parseCookieString Error - URI malformed I have attempted numerous soluti ...

What is the process for subtracting data from an object in a Node.JS environment?

My task involves analyzing sensor data which is stored as an array of objects containing current and previous month's information. The goal is to calculate the difference between the current and previous month's data and add this difference to th ...

A guide to crafting a fresh WordPress post with the help of the wpapi library for Node.js

After attempting to use the wpapi module to generate a post in WordPress, I encountered a puzzling issue. Despite receiving a 200 Success response, the request body was empty and no post was actually created. var wp = new WPAPI({ endpoint: 'http:/ ...

Having issues with handling ajax response in a Node.js application?

I am encountering an issue with my ajax post request to my node js backend. After sending the request and receiving a response, instead of updating just the resulttoken in the view, the entire HTML page seems to be loaded according to the console. I am see ...

The hovering effect on the image link is causing the surrounding div to stretch too far

Whenever I hover over specific points below an image link wrapped in a div, it triggers the hovering effect for the CSS-created image link. Despite trying various solutions like overflow:hidden and display:inline-block, nothing seems to resolve this issue. ...

Prevent the selection of rows and only enable the option to select checkboxes in PrimeNG's Multiselect feature

I'm currently working on a task that involves using PrimeNG multiselect. This particular multiselect includes checkboxes followed by text within each row. I need to disable the ability to select rows by clicking on the text, and instead only allow sel ...

Why is my AngularJS application triggering two events with a single click?

<button id="voterListSearchButton" class="serachButton" ng-click="onSearchButton1Click()">find</button> This button allows users to search for specific information: $scope.onSearchButton1Click = function() { var partId = $("#partIdSearch" ...

Learn how to showcase the current date by utilizing JavaScript arrays and the getDate method!

I have been struggling to format the date as follows: "Today is Sunday, the 31st day of March in the year 2019." I am working with JavaScript in an HTML5 document. Below is the code I have so far, and I would appreciate any help. I prefer not to rely on ...

Sending data from a child component to its parent counterpart

A component called cartComponent has a data property named cartCount which increases every time a new item is added to the cart. I want to utilize this value to update another value in the template that is not part of the component. Is it achievable? Bel ...

Global jQuery variables are unexpectedly coming back as "undefined" despite being declared globally

I need to save a value from a JSON object in a global variable for future use in my code. Despite trying to declare the country variable as global, it seems like it doesn't actually work. $.getJSON(reverseGeoRequestURL, function(reverseGeoResult){ ...

The operation of assigning the value to the property 'baseUrl' of an undefined object cannot be executed

I recently created a JavaScript client using NSWAG from an ASP .NET Rest API. However, I am encountering some errors when attempting to call an API method. The specific error message I am receiving is: TypeError: Cannot set property 'baseUrl' of ...

The cross-domain AJAX request fails to receive a response

I am currently working on validating PAN card details. I am utilizing an AJAX call to verify the PAN card entered by the user, sending the PAN number to this URL: . The data is being sent to the following URL using AJAX call: function callbackFnc(data) { ...

Having trouble retrieving the state value of an array in React?

Having issues with ...this.state.users in React My React Code: handleChange(i, e) { const { name, value } = e.target; let users = [...this.state.users]; users[i] = { ...users[i], [name]: value }; this.setState({ users }); } Snippet from ...

xhttp.load path for server-side module

I'm currently working on developing a node package and in my JavaScript code, I have the following: const calcHtml = './calc.html'; const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4) { ...

Enhance click functionality on list item content using knockoutjs

Check out my app on GitHub or view it live at this link. I'm trying to implement a feature where clicking on each item, like "Bookworm Buddy," will toggle its description within the project. Here's what I've attempted so far: function AppV ...

Dynamic web elements can be easily enhanced through the use of jQuery

Upon loading a page through AJAX, I encountered the following code involving animation of a div (#1 moves it to the left and #2 moves it back): #1 $('#flipper').click(function () { $(".l-l").animate({ "left": -267 }, 600, function () { ...