Return additional properties using reduce and spread operator JS?

Question

I am using the reduce function below to count how many times a players name is mentioned and then list them based on who was mentioned the most to the least.

I am trying to return the 2nd property [`${value.subtitles[0].name} + ${index}`] : value.subtitles[0].url with my object and sort it. However it is not sorting properly. When only returning the first property [value.title]: (acc[value.title] || 0) + 1, everything works as intended. But the second property is making it sort incorrectly. It is supposed to be sorting based on the title property value which is an integer of how many times that player was mentioned, from most to least. Why is this happening?

Thanks for the help!

const players = [
  {
    "title": "Mike",
    "titleUrl": "https://mikegameplay",
    "subtitles": [
      {
        "name": "Mike Channel",
        "url": "https://channel/mike"
      }
    ]
  },
  {
    "title": "Cindy",
    "titleUrl": "https://cindy",
    "subtitles": [
      {
        "name": "Cindy Channel",
        "url": "https://channel/cindy"
      }
    ]
  },
  {
    "title": "Mike",
    "titleUrl": "https://mike",
    "subtitles": [
      {
        "name": "Mike Channel",
        "url": "https://channel/mike"
      }
    ]
  },
  {
    "title": "Haley",
    "titleUrl": "https://Haley",
    "subtitles": [
      {
        "name": "Haley Channel",
        "url": "https://channel/haley"
      }
    ]
  },
  {
    "title": "Haley",
    "titleUrl": "https://Haley",
    "subtitles": [
      {
        "name": "Haley Channel",
        "url": "https://channel/haley"
      }
    ]
  },
  {
    "title": "Haley",
    "titleUrl": "https://Haley",
    "subtitles": [
      {
        "name": "Haley Channel",
        "url": "https://channel/haley"
      }
    ]
  }
]

const counts = players.reduce((acc, value, index) => ({
   ...acc,
   [value.title]: (acc[value.title] || 0) + 1,
   [`${value.subtitles[0].name} + ${index}`] : value.subtitles[0].url
}), {});

const sortedValues = [];

for (const value in counts) {
    sortedValues.push([value, counts[value]]);
};

sortedValues.sort((a, b) => b[1] - a[1]);

console.log(sortedValues)

Answer 1

try this

var groupBy = function (xs, key) {
  return xs.reduce(function (rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

var pl = groupBy(players, "title");
console.log(pl);

let sortable = [];
for (var item in pl) {
  sortable.push([item, pl[item].length, pl[item][0].subtitles[0].url]);
}

sortable.sort(function (a, b) {
  return b[1] - a[1];
});

console.log(JSON.stringify(sortable));

result

[["Haley",3,"https://channel/haley"],["Mike",2,"https://channel/mike"],["Cindy",1,"https://channel/cindy"]]