Sorting JSON alphabetically by first letter

Question

I have a JSON like this:

[
  {
    "id": 1,
    "slug": "abakan",
    "name": "Абакан"
  },
  {
    "id": 4,
    "slug": "almetevsk",
    "name": "Альметьевск"
  },
  {
    "id": 10,
    "slug": "astrahan",
    "name": "Астрахань"
  },
  {
    "id": 11,
    "slug": "barnaul",
    "name": "Барнаул"
  },
  ...
]

And getting this by this method:

public function getCities()
{
    $cities = City::mainCities()->get(['id', 'slug', 'name']);
    return response()->json($cities);
}

How can i sort this list alphabetically and with their letters. For example:

"A": [
  {
    "id": 1,
    "slug": "abakan",
    "name": "Абакан"
  },
  {
    "id": 4,
    "slug": "almetevsk",
    "name": "Альметьевск"
  }
],
"B": [
  {
    "id": 11,
    "slug": "barnaul",
    "name": "Барнаул"
  },
  ...
]

and so on...

I have Laravel on the backend and VueJS on front.

Answer 1

This works for me:

var items = [
  {
    "id": 11,
    "slug": "barnaul",
    "name": "Барнаул"
  },
  {
    "id": 1,
    "slug": "abakan",
    "name": "Абакан"
  },
  {
    "id": 4,
    "slug": "almetevsk",
    "name": "Альметьевск"
  },
  {
    "id": 10,
    "slug": "astrahan",
    "name": "Астрахань"
  }
];
var sortedItems = items.sort((a, b) => a.slug.localeCompare(b.slug));

var results = {};
for (var i = 0; i < 26; i++) {
  var char = String.fromCharCode(97 + i);
  var bigChar = char.toUpperCase();
  results[bigChar] = [];
  for (var s = 0; s < sortedItems.length; s++) {
    if (sortedItems[s].slug.startsWith(char)) {
      results[bigChar].push(sortedItems[s]);
    }
  }
}

console.log(results)

Answer 2

My solution:

var cities = [
    {
        "id": 1,
        "slug": "abakan",
        "name": "Абакан"
    },
    {
        "id": 4,
        "slug": "almetevsk",
        "name": "Альметьевск"
    },
    {
        "id": 11,
        "slug": "barnaul",
        "name": "Барнаул"
    },
    {
        "id": 10,
        "slug": "astrahan",
        "name": "Астрахань"
    }
];

cities.sort(function (a, b) {
    return a.slug[0].toUpperCase() > b.slug[0].toUpperCase();
});

var newCities = {};

for (var i = 0; i < cities.length; i++) {
    var c = cities[i].slug[0].toUpperCase();
    if (newCities[c] && newCities[c].length >= 0)
        newCities[c].push(cities[i]);
    else {
        newCities[c] = [];
        newCities[c].push(cities[i]);
    }
}

console.log(newCities);