<select id="person"></select>
<select id="key"></select>
<span id="value"></span>
const data = [
{
"ФИО": "Иванов Сергей",
"Адрес": {
"Город": "Москва",
"Улица": "Пятницкая",
"Дом": "35",
},
},
{
"ФИО": "Сидоров Иван",
"Адрес": {
"Город": "Питер",
"Улица": "Ленина",
"Дом": "42",
},
},
];
const selects = [
Select('#person', data.map(n => n['ФИО'])),
Select('#key', Object.keys(data[0]['Адрес'])),
];
selects.forEach(n => n.addEventListener('change', onChange));
function Select(selector, options) {
const el = document.querySelector(selector);
el.append(...options.map(n => new Option(n)));
el.value = null;
return el;
}
function onChange() {
const [ person, key ] = selects.map(n => n.value);
if (person && key) {
const value = data.find(n => n['ФИО'] === person)['Адрес'][key];
document.querySelector('#value').textContent = value;
}
}
