Question 384546 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Sorting an array of objects by date with some dates being null

I have a huge array of objects called steamData that look like this:

 {
        "sid": 1690,
        "store_url": "https://store.steampowered.com/app/1690",
        "store_promo_url": null,
        "store_uscore": 69,
        "published_store": "2006-10-16",
        "published_meta": "2006-10-16",
        "published_stsp": "2006-10-16",
        "published_hltb": "2020-04-18",
        "published_igdb": "2006-09-01",
        "image": "https://steamcdn-a.akamaihd.net/steam/apps/1690/header.jpg",
        "name": "Space Empires V",
        "description": "Space Empires V is the latest edition in the Space Empires series. This new chapter completely updates the UI and takes ...",
        "full_price": 1999,
        "current_price": 499,
        "discount": 75,
        "platforms": "WIN",
        "developers": "Malfador Machinations",
        "publishers": "Strategy First",
        "languages": "English",
        "voiceovers": null,
        "categories": "Single-player,Multi-player",
        "genres": "Strategy",
        "tags": "Strategy,4X,Space,Sci-fi,Turn-Based,Singleplayer,Turn-Based Strategy,Multiplayer",
        "achievements": null,
        "gfq_url": "https://gamefaqs.gamespot.com/pc/927958-space-empires-v?ftag=MCD-06-10aaa1f",
        "gfq_difficulty": "Just Right-Tough",
        "gfq_difficulty_comment": "<a href="/games/rankings?platform=19&amp;genre=45&amp;list_type=diff&amp;dlc=1&amp;page=22&amp;game_id=927958&amp;min_votes=2#1114"><b>#1114</b></a> hardest PC strategy game (<a href="/games/rankings?platform=19&amp;list_type=diff&amp;dlc=1&amp;page=122&amp;game_id=927958&amp;min_votes=2#6145"><b>#6145</b></a> on PC, <b>#24997</b> overall)",
        "gfq_rating": 3.54,
        "gfq_rating_comment": "<a href="/games/rankings?platform=19&amp;genre=45&amp;list_type=rate&amp;view_type=1&amp;dlc=1&amp;page=16&amp;game_id=927958&amp;min_votes=2#818"><b>#818</b></a> lowest rated PC strategy game (<a href="/games/rankings?platform=19&amp;list_type=rate&amp;view_type=1&amp;dlc=1&amp;page=163&amp;game_id=927958&amp;min_votes=2#8199"><b>#8199</b></a> on PC, <b>#33932</b> overall)",
        "gfq_length": 68.6,
        "gfq_length_comment": "<a href="/games/rankings?platform=19&amp;genre=45&amp;list_type=time&amp;dlc=1&amp;page=2&amp;game_id=927958&amp;min_votes=2#119"><b>#119</b></a> longest PC strategy game (<a href="/games/rankings?platform=19&amp;list_type=time&amp;dlc=1&amp;page=12&amp;game_id=927958&amp;min_votes=2#618"><b>#618</b></a> on PC, <b>#1757</b> overall)",
        "stsp_owners": 75000,
        "stsp_mdntime": null,
        "hltb_url": "https://howlongtobeat.com/game?id=8846",
        "hltb_single": 10,
        "hltb_complete": null,
        "meta_url": "https://www.metacritic.com/game/pc/space-empires-v?ftag=MCD-06-10aaa1f",
        "meta_score": 68,
        "meta_uscore": 77,
        "grnk_score": 65,
        "igdb_url": "https://www.igdb.com/games/space-empires-v",
        "igdb_single": null,
        "igdb_complete": null,
        "igdb_score": 65,
        "igdb_uscore": 50,
        "igdb_popularity": 1.89
    },

I’m trying to sort this array by it’s published_meta date newest to oldest:

 if (!loading) {
    // Sort from oldest to youngest
    steamData.sort((a, b) => (b)?.published_meta.localeCompare((a)?.published_meta));

    // Get today as milliseconds
    let today = new Date().toLocaleDateString('en-CA');
    let todayMS = Date.parse(today);

    // Get index of closest element to today
    let closestIndex = steamData.reduce((acc, obj, index) => {
      let diff = Math.abs(Date.parse(obj?.published_meta) - todayMS);
      return acc.diff > diff ? { diff, index } : acc;
    }, { diff: Infinity, index: null }).index;

    // Move closest element to start of array
    steamData.unshift(newTrending.splice(closestIndex, 1));
  }

I keep running into the error "Cannot read properties of null (reading ‘localeCompare’)"

Some of the objects are have null as their published dates (published_meta seems to have the fewest of these). I thought optional chaining would fix this but it has not.

How can I sort the steamData array to use?

Tags:

2

Answers


  1. 0

    You need the ? on published_meta, too. published_meta?.localeCompare. Can’t call localeCompare on null.

    That’s the first step. I suspect sorting using null will lead to unexpected behavior.

    Login or Signup to reply.
  2. 0
    1. Just fill null values with a fake string (if you need null values at top, change to 3 for example).
    2. Don’t use localeCompare since it’s very slow, creates Intl.Collator every time. You characters are just digits, compare with <> operators or create Intl.Collator only once.
    const items = [{"published_meta": null}, {"published_meta": "2006-10-16"}, {"published_meta": "2006-10-15"}];

items.sort(({published_meta: a}, {published_meta: b}) => (a ??= '0') > (b ??= '0') ? -1 : a < b ? 1 : 0);

console.log(items);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search