score:1
the problem is that you are only using the values()
to perform the sort, when you should be sorting the objects with the keys as well. the other problem you have, is that it is not generally good practice to desire your object keys to be in a particular order. it makes much more sense to change your render function to results.map
instead of object.keys(results).map
. here is your desired output though:
const studentdata = {
"studentname1": {
"active": true,
"gender": "male"
},
"studentname2": {
"active": false,
"gender": "male"
},
"studentname3": {
"active": false,
"gender": "female"
},
"studentname4": {
"active": true,
"gender": "female"
},
"studentname5": {
"active": true,
"gender": "female"
},
"studentname6": {
"active": false,
"gender": "female"
}
}
const sorted = object.entries(studentdata)
.sort((a, b) => b[1].active - a[1].active)
.reduce((r, [key, value]) => {
r[key] = value
return r
}, {})
console.log(sorted)
if you remove the reduce()
, you will get your desired results, but simply in an array. this is preferable, because the reduce is redundant, as you are turning it back to an array anyway with object.keys()
. also while key order should be maintained these days, it still feels unintuitive to rely on it.
score:1
sort on object.entries
, then reconstruct the object in your map statement (using eval
unfortunately to preserve the variable name):
const studentdata = {
"studentname1": {
"active": true,
"gender": "male"
},
"studentname2": {
"active": false,
"gender": "male"
},
"studentname3": {
"active": false,
"gender": "female"
},
"studentname4": {
"active": true,
"gender": "female"
},
"studentname5": {
"active": true,
"gender": "female"
},
"studentname6": {
"active": false,
"gender": "female"
}
};
object.entries(studentdata).sort((a, b) => b[1].active - a[1].active).map(([ name: objname, { active, gender } ]) => (
eval(`let ${objname} = { active: ${active}, gender: ${gender} }`);
return (
<>
<span>{name}</span>
)
));
score:2
sort the object's entries (not just the keys) when preparing to render, so that you have a sorted array containing the keys and the associated values at once:
object.entries(studentdata)
.sort((a, b) => b[1].active - a[1].active)
.map(([name, { active, gender }]) => (
// render ul, li with variables name, active, and gender
))
Source: stackoverflow.com
Related Query
- Sort list of objects javascript
- How do I sort a list of objects based on key with conditional access in Javascript (and Flow)?
- Sort and group objects alphabetically by first letter Javascript
- Removing duplicate value from list of javascript objects in react js
- Sort an array of objects dynamically javascript
- Objects with data into object with list of keys and values - javascript
- How to Sort Dates, Numbers, Strings from the array of nested JSON objects in Javascript
- Modify list of objects using Javascript ES6
- how to make button to sort array of objects alphabetical javascript react
- For a JPA entity with many to 1 relation to a data entity, how to sort a list of objects by the result of a method call of the data entity?
- how to sort list of users by score (fetching database) javascript
- How to map through array of objects and list each object in a card using javascript and react?
- How do you convert a list of json objects to a list of javascript objects?
- Sort an array of objects in React and render them
- Number of objects vs Payload, while scaling a modern Javascript project which is more important?
- How to sort list of React components based on different properties?
- How to sort array of objects based on a boolean property?
- how to group array of objects by value in reactjs / javascript
- Javascript: Filter list of objects by a list of filter objects
- ReactJS: How do I sort an array of objects based on value of props?
- Merge two objects in javascript ignoring undefined values
- Sort mapped list with Lodash on ReactJS
- Create nested JSX list items from multi-level nested array of objects reactjs
- Sort array by first character then number in JavaScript
- Javascript check if string exists in array of objects
- How to sort a nested array of objects in javascript?
- Feed native Javascript objects to React
- Adding up the values of an array of objects javascript
- Iterate in array extract and add to new list if object value is true in javascript
- React remove object from list of objects without unique value, using hooks
More Query from same tag
- Change attribute of JS widget direction=rtl into dir=rtl
- React passing props to child component using TypeScript and React Router
- How to mock web worker for testing in react testing library?
- how to reload the page after call handleDelete but it stays on the current page,not reload to the homepage, i want stay on the current page
- Error running "firebase deploy --only functions"
- React JS: Cannot read property 'setState' of undefined when updating from React.createClass
- How to start and stop both the webcam stream and microphone in React JSX using WebRTC?
- React trying to delete a item from a list
- React: add HTML from generic file path at server-side build time
- how can I fix an error of undefined variables even if they are defined?
- Why can't I read message or status code on receiving 409 in response?
- Using the results from useEffect
- problem with react slick: import { baseUrl } from "./config
- How to change url with a scroll in react?
- Cannot read properties of undefined (the general state is undefined)
- Giving an array of objects taken from Firebase(Firestore) to a useState array variable
- node serving react working locally but not on heroku
- React-loadable warning text content did not match
- How to make React Component call a function on every state change?
- API array problems
- Render something in React only if a condition is met?
- How to create a new google meet using google calendar api
- How to set variant outline and size small in NumberFormat component of Material UI?
- React Helmet injecting a javascript object into head tag
- displaying upload preview and stopping auto upload with dropzone react
- MUI's Autocomplete AS MULTIPLE input + react-hook-form + controlling default values not working (TypeError: Can't read property 'filter' of undefined)
- Need to Manipulate pixels extracted from an image, im using p5.js and react
- slice function applied on undefined
- Passing state in function inside React functional component
- How to unit test React JSX ES6 code with KARMA?