How to sort array of objects by key? Unable to get it right

Question

Apologies if this is a newbie question, Im learning JS and jQuery. I'm trying to sort an array of objects by the key first_name after a button click but Ive been unsuccessful.

I've tried grabbing a div with a class of ajaxStyling. Then insert adjacent html for the button with id of #btn-click. Then I use jQuery to hijack the click and try to sort with a function using newCourse.students (my array of objects/works when doing console.log) but the whole sort function is not working. Im not getting errors on the console but the text wont sort. Maybe is my return? or maybe is that i need to append again?

  $('#btn-click').on('click', (e) => {
          e.preventDefault()
          // console.log(newCourse.students)
          newCourse.students.sort(function(a, b) {
            // return a.first_name > b.first_name;

            var nameA = a.first_name.toUpperCase();
            var nameB = b.first_name.toUpperCase();
            if (nameA < nameB) {
              return -1;
            }
            if (nameA > nameB) {
              return 1;
            }
            return 0;
          });
          newCourse.students
        })

What I get when I log newCourse.students

(3) [{…}, {…}, {…}]
0: {id: 11, first_name: "Stefan", last_name: "Candelaria", …}
1: {id: 12, first_name: "Robby", last_name: "Pasurin", …}
2: {id: 10, first_name: "Rafa", last_name: "Lopez", …}
length: 3

My html. Would like to sort by name after a button click to achieve the following order 1.Rafa Lopez 2.Robby Pasurin 3.Stefan Candelaria ...instead of the order below.

<div class="container">
    <div class="ajaxStyling">
  <a href="/courses/6" data-id="6"><h3 class="showText">Adobe Analytics 201 by Adam Greco</h3></a>
  <p class="show_link">Stefan Candelaria</p>
  <p class="show_link">Robby Pasurin</p>
  <p class="show_link">Rafa Lopez</p>
</div>
<button id="btn-click">Click Me!</button>
</div>

You sort the array, but not sure how the HTML has to do with the array sorting. If you are saying it is reversed, sounds like you would have the 1 and -1 logic reversed. — epascarello
– epascarello, Commented Aug 3, 2019 at 1:13
newCourse.students is calling students which is an attribute of Course. I tried your reco but didnt work : ( — Rafael Lopez
– Rafael Lopez, Commented Aug 3, 2019 at 1:19
it looks like you were logging before the sort. The last line of click function doesn't do anything, but that's where you should do something with the array. — Geoduck
– Geoduck, Commented Aug 3, 2019 at 2:02

Aarthi A · Accepted Answer · 2019-08-03 02:02:56Z

1

sort by name after a button click

function myFunction() {
 $('.show_link').sort(function(a, b) {
  if (a.textContent < b.textContent) {
    return -1;
  } else {
    return 1;
  }
}).appendTo('body');

}

<div class="container">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>    
<div class="ajaxStyling" id="ajaxStyling">
  <a href="/courses/6" data-id="6"><h3 class="showText">Adobe Analytics 201 by Adam Greco</h3></a>
  <p class="show_link">Stefan Candelaria</p>
  <p class="show_link">Robby Pasurin</p>
  <p class="show_link">Rafa Lopez</p>
</div>
<button id="btn-click" onclick="myFunction()">Click Me!</button>
</div>

answered Aug 3, 2019 at 2:02

Aarthi A

1067 bronze badges

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

Comments

ubuntugod · Accepted Answer · 2019-08-04 01:12:09Z

0

I will give you the basic idea since I am typing this on phone.

Here is the sorting way:

let arrUsers = [
  {id: 12, first_name: "Robby", last_name: "Pasurin"},
{id: 13, first_name: "Bobby", last_name: "Pasurin"}
];

arrUsers.sort((objUser1, objUser2) => {
  let sFirstName = objUser1.first_name.toLowerCase(), sSecondName = objUser2.first_name.toLowerCase();

return sFirstName !== sSecondName ? sFirstName < sSecondName ? -1 : 1 : 0;
});

console.log(arrUsers);

You can build the html iterating this result like:


$('#users').html('');

let arrUsers = [
  {id: 12, first_name: "Robby", last_name: "Pasurin"},
{id: 13, first_name: "Bobby", last_name: "Pasurin"}
];

arrUsers.sort((objUser1, objUser2) => {
  let sFirstName = objUser1.first_name.toLowerCase(), sSecondName = objUser2.first_name.toLowerCase();

return  sFirstName !== sSecondName ? sFirstName < sSecondName ? -1 : 1 : 0;
}).map(objUser => $('#users').append(`<p>${objUser.first_name}</p>`));

Sample html placing the <p> tag inside a div:

<body>
  <a></a>
  <div id="users">

  </div>
</body>

edited Aug 4, 2019 at 1:12

answered Aug 3, 2019 at 3:14

ubuntugod

6521 gold badge9 silver badges16 bronze badges

1 Comment

Rafael Lopez Over a year ago

Awesome, i was messing up not using the map method and appending so this was super helpful. Thanks a lot.

Collectives™ on Stack Overflow

How to sort array of objects by key? Unable to get it right

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related