Sorting a converted object (Object.entries)

JavaScript
1

I have a large object of key:value pairs to sort by the value.
15

I am trying to convert to an array using Object.entries, I believe it results in an array of arrays (rather than an array of objects) so I am trying access the value by using index 1, rather than dot notation:

sortBy = () => {
    const countries = this.props.countriesToRender;
    const countriesArray = Object.entries(countries);
    return countriesArray.sort((a, b) => {
      return b[1] - a[1];
    });
  };

so far it doesn’t work, does this seem the right approach?

3 
const countries = {
  Bfghanistan: 3,
  Zlbania: 9,
  Clgeria: 3
};

const arrOfArrays = Object.entries(countries);

const sorted = arrOfArrays.sort((a, b) => {
	return a[0].localeCompare(b[0]);
});

console.log(sorted);

I’m not entirely sure return val1 - val2 works. I think sort requires a return of -1, 1, 0.

https://jsfiddle.net/5Ldnt4h7/

4

Yes, that is exactly how I’d like them to look - thanks!
I’ll try it now, but also think I might need to set state so the sorted array is rendered? Will try it out :slight_smile:

6

I actually want to sort by the numbers not the names, so will do [1] – using [0] will sort by the names I assume? Will try it.

7

Oh he’s sorting by the numbers and not sorting the country names alphabetically?

10 
import React from "react";

class Table extends React.Component {
  
  getCountryNames = () => {
    return Object.keys(this.props.countriesToRender);
  };

  getDeveloperCounts = () => {
    return Object.values(this.props.countriesToRender);
  };

  sortBy = () => {
    const countries = this.props.countriesToRender;
    const countriesArray = Object.keys(countries).map(country => ({
      [country]: countries[country]
    }));

    return countriesArray.sort((a, b) => {
      const aVal = Object.values(a)[0];
      const bVal = Object.values(b)[0];
      return bVal - aVal;
    });
  };

  render() {
    return (
      <div>
        <table className="ui celled center aligned table">
          <thead>
            <tr>
              <th>Country</th>
              <th>
                {" "}
                <button onClick={() => this.sortBy()}>Developers</button>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                {this.getCountryNames().map(name => {
                  return <tr>{name}</tr>;
                })}
              </td>
   
              <td>
                {this.getDeveloperCounts().map(count => {
                  return <tr>{count}</tr>;
                })}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}
export default Table;

This is the whole component, I think I’m not feeding the results of the sort into the render properly.

12

no errors related to the sort

13

No because developers is the raw data, the developerCount is calculated from the countriesToRender method

14

I just tried adding a new state property, with sortBy as a callback to App.js but it didn’t make much difference

16

Gotcha. My error then.

Of course I had to find another way. :smiley:

const countries = {
  Bfghanistan: 2,
  Zlbania: 9,
  Clgeria: 3
};

const sorted = Object.entries(countries).sort(([c1, v1], [c2, v2]) => {
	return v2 - v1;
}).reduce((o, [k, v]) => (o[k] = v, o), {});

console.log(sorted);
17

in the Table.js .

I’ve moved it back up to App.js with a setState

  sortBy = () => {
    const countries = this.state.countriesToRender;
    const countriesArray = Object.keys(countries).map(country => ({
      [country]: countries[country]
    }));

    const sortedCountries = countriesArray.sort((a, b) => {
      const aVal = Object.values(a)[0];
      const bVal = Object.values(b)[0];
      return bVal - aVal;
    });
    this.setState({ countriesToRender: sortedCountries });
  };
19

Yeah. Not really readable at all. lol.