How to sort array of objects by title if first character is a symbol-CodePudding

I am sorting an array of objects (products) and rendering them into a React functional component.

The products in question come from the dummyjson API https://dummyjson.com/docs/products

I am trying to implement a sort function to sort them by title in asc order on when fetching the API data with the following line of code:

let sortData = data.products.sort((a, b) => a.title.localeCompare(b.title));
    setProducts([...sortData])

This works fine and I understand the concept of sorting. However, one of the product titles is "- Daal Masoor 500 grams", meaning it automatically takes first place in the sorted list before numbers and letters due to the "-" character.

How do I handle this and sort it based on the first letter character? Or is it best practice to sort based on the API data no matter what? (and keep it as the first value when sorted).

Any help would be much appreciated!

CodePudding user response：

To sort array of objects by title and ignore any leading special characters (symbols, spaces, etc.), you can use the following code:

let sortData = data.products.sort((a, b) => {
  // remove any leading special characters from the title
  const titleA = a.title.replace(/^[^a-zA-Z0-9] /, '');
  const titleB = b.title.replace(/^[^a-zA-Z0-9] /, '');
  // compare the titles
  return titleA.localeCompare(titleB);
});
setProducts([...sortData]);

This will remove any leading special characters from the title and then compare the titles using localeCompare(). This will ensure that the titles with leading special characters are sorted correctly based on the first letter character.

Alternatively, you can use the String.prototype.trimStart() method to remove any leading whitespace characters from the title, which will also remove any leading special characters:

let sortData = data.products.sort((a, b) => {
  // remove any leading whitespace characters from the title
  const titleA = a.title.trimStart();
  const titleB = b.title.trimStart();
  // compare the titles
  return titleA.localeCompare(titleB);
});
setProducts([...sortData]);

Both of these approaches will produce the same result and will sort the array of objects by title, ignoring any leading special characters.

CodePudding user response：

In order to sort an array of objects based on the first character of the title property, you can use the Array.prototype.sort() method and provide a custom sorting function. The custom sorting function should first check the first character of the title property of each object in the array, and then compare them using the localeCompare() method.

Here's an example of how you might implement this:

let sortData = data.products.sort((a, b) => {
  // Get the first character of the title for each object
  let aFirst = a.title[0];
  let bFirst = b.title[0];

  // Compare the first characters of the titles using localeCompare()
  if (aFirst.localeCompare(bFirst) !== 0) {
    return aFirst.localeCompare(bFirst);
  }

  // If the first characters are the same, compare the entire title
  return a.title.localeCompare(b.title);
});
setProducts([...sortData]);

In this example, the sort() method will first compare the first characters of the title property of each object in the array. If the first characters are different, it will return the result of the localeCompare() method applied to the first characters. If the first characters are the same, it will compare the entire title property using the localeCompare() method.

CodePudding user response：

You could extract with a regex the title from the 1rst letter character and sort according to that modified title version. So you won't modify the real title and the sort will be in order ?