Создание массива JavaScript с комбинацией объектов и массивов

Оффтоп javascript
1

Мне нужно создать структуру данных, которую можно использовать для двухуровневой навигации.

var regions = [
    {
        "Region": "Московская область",
        "Towns": ['Химки', 'Подольск', 'Мытищи']
    },
    {
        "Region": "Ленинградская область", 
        "Towns": ['Гатчина', 'Выборг', 'Тосно']
    }
];

Сейчас я могу обращаться к данным через regions[0].Towns[0] или regions[0].Region, но как лучше переструктурировать массив regions, чтобы можно было напрямую использовать название региона для получения списка городов? Нужно реализовать два связанных выпадающих списка, где выбор в первом списке определяет варианты во втором.

2

можешь еще Map использовать для более гибкой структуры:

const regionsMap = new Map([
    ['Московская область', ['Химки', 'Подольск', 'Мытищи']],
    ['Ленинградская область', ['Гатчина', 'Выборг', 'Тосно']]
]);

города получаешь через regionsMap.get('Московская область'), регионы через regionsMap.keys(). Map лучше если часто добавляешь/удаляешь регионы

3

Если данных много, создай класс RegionManager с методами getRegions() и getTowns(regionName). Это будет чище, чем объект или Map, особенно когда логика усложнится. Но стоит ли заморачиваться с классами сейчас?

4

Для двухуровневой навигации лучше брать объект, а не массив. Переделай структуру:

var regions = {
    "Московская область": ['Химки', 'Подольск', 'Мытищи'],
    "Ленинградская область": ['Гатчина', 'Выборг', 'Тосно']
};

Теперь просто пишешь regions["Московская область"] и получаешь массив городов. Для выпадающих списков: Object.keys(regions) для первого списка, regions[selectedRegion] для второго.