How to alphabetically list an already mapped array in javascript?

Question

Having some issues on this, my code is supposed to hit an API, return a list of counties in a state, and display them. It does display just fine, however I want them to be in alphabetical order. Because this is a react component, I cannot understand where I would do a sort function, here is the part of the function that is mapped :

          {error ? (
            <h1>{error.message}</h1>
          ) : (
            counties.map(function (county, index) {
              if (
                county.location.split(", ")[1] === stateName &&
                county.location.split(" ")[0] !== "Unassigned" &&
                county.location.split(" ")[0] !== "Out"
              ) {
                return (
                  <div className="card" key={index}>
                    <h3>{county.location.split(",")[0]}</h3>
                    <p>confirmed: {county.confirmed}</p>
                    <p>dead: {county.dead}</p>
                  </div>
                );
              } else {
                return null;
              }
            })
          )}
        </div>```

Does this answer your question? [Sort array of objects by string property value](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value) — dwjohnston, Oct 04 '20 at 03:29

score 1 · Answer 1 · answered Oct 04 '20 at 10:17

Maybe this will help you.

Universal sorting function:

const sortDataByProperty = (data, property) => {
  const sorted = [...data].sort((a, b) => {
    return a[property].toLowerCase().localeCompare(b[property].toLowerCase());
  });

  return sorted;
};

Your Reactjs code:

{error ? (
  <h1>{error.message}</h1>
) : (
  // first parameter is data object
  // second is object property by which you want to sort the data
  const sortedData = sortDataByProperty(counties, 'name');

  sortedData.map(function (county, index) {
    if (
      county.location.split(", ")[1] === stateName &&
      county.location.split(" ")[0] !== "Unassigned" &&
      county.location.split(" ")[0] !== "Out"
    ) {
      return (
        <div className="card" key={index}>
          <h3>{county.location.split(",")[0]}</h3>
          <p>confirmed: {county.confirmed}</p>
          <p>dead: {county.dead}</p>
        </div>
      );
    } else {
      return null;
    }
  })
)}
</div>

score 0 · Answer 2 · answered Oct 04 '20 at 03:34

Sort right before mapping. Using this you might have duplicate code. What you can do instead is 1) map the fix the way you are handling the response, 2) sort using your own sorting function, since county seems to be JSON, and 3) Finally, map your stuff and return the JSX (the only thing that is rendered is the final return)

          {error ? (
            <h1>{error.message}</h1>
          ) : (
            counties.sort(/* Sort function goes here */).map(function (county, index) {
              if (
                county.location.split(", ")[1] === stateName &&
                county.location.split(" ")[0] !== "Unassigned" &&
                county.location.split(" ")[0] !== "Out"
              ) {
                return (
                  <div className="card" key={index}>
                    <h3>{county.location.split(",")[0]}</h3>
                    <p>confirmed: {county.confirmed}</p>
                    <p>dead: {county.dead}</p>
                  </div>
                );
              } else {
                return null;
              }
            })
          )}
        </div>

How to alphabetically list an already mapped array in javascript?

2 Answers2