Структура данных JavaScript для захвата пары значений в качестве ключа и его значения

Question

У меня есть раскрывающийся список каскадных фильтров, раскрывающийся список стран и раскрывающийся список состояний. После того, как выбор сделан, мне нужно перенаправить пользователя на соответствующую страницу. Например.

    {
      USA + Texas : Texas URL,
      Germany + Berlin: Berlin URL
    } 

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

{
 Texas URL: ["USA", "Texas"],
 Berlin URL: ["German", "Berlin"]
}

Мне нужно создать структуру данных, например карту объектов или хэш-таблицу, чтобы захватить эти данные.

Может кто-нибудь дать мне предложения о том, как лучше всего создать эту структуру данных. Вот мой код:

https://jsbin.com/tarapijumi/3/edit?html,js,output

Answer 1

Вы можете взять вложенные объекты и использовать штат и город в качестве средства доступа

target = {
    USA: {
        California: 'http://example.com/usa/california',
        Texas: 'http://example.com/germany/texas'
    },
    Germany: {
        Frankfurt: 'http://example.com/germany/frankfurt',
        Berlin: 'http://example.com/germany/berlin'
    }
}

Доступ с массивом, как

href = [country, state].reduce((r, k) => (r || {})[k], target)

Answer 2

Если вы хотите, чтобы это было удобно и понятно в коде, я думаю, что лучшим способом было бы иметь 2 словаря.Одна из всех стран с городами каждого и одна для URL-адреса для каждого города:

countries = {
    "USA": ["California", "Texas"],
    "Germany": ["Berlin", "Leipzig"]
};

urls = {
    "Texas": "Texas URL",
    "California": "California URL",
    "Berlin": "Berlin URL",
    "Leipzig": "Leipzig URL"
};

А затем для удобной части вы можете сделать следующее: когда выбрана страна, следующий выбор будет иметь варианты только для городов этой страны.

Так что, если США будут выбраны, они увидят только Техас и Калифорнию в следующем выборе.

Я надеюсь, что помог вам: -)