osteria | Osteria demo app for GenStage in the Kitchen talk | Learning library

I'm going to start with this, even though it's unrelated to your question:

var jsonData = JSON.parse(JSON.stringify(json));

This is unnecessary. Your variable json is an object, not actual JSON. This line converts it into JSON (with stringify) then back into an object identical to the one you started with (with parse). You could skip all this and just use json directly (ideally with a less misleading name.)

Now on to your question:

There are a lot of problems here, most of them boiling down to "you're passing null to cmo where it expects an array.":

• You try to run the functions on load, when nothing is selected, which passes null to cmo
• Emptying the town also fires its onChange event, passing its null value to setHotel and then cmo You had extra keys named "region" and "town" in your data, which you didn't account for when trying to match against that data You had a duplicate ID in your HTML, so when you were trying to check the value of the hotel select, you instead got the (nonexistent) value of its label ...and you had objects in your data you were accidentally trying to access as arrays. Below is a corrected version; I've added comments where I made changes to your code: // renamed this, and removed the unneeded stringify-and-parse dance var jsonData = { "region": { "Warmińsko - mazurskie": { "town": { "Olsztyn": ["Mercury", "Novotel", "Sheraton", "Radisson", "Gołębiewski"], "Elbląg": ["Mercury", "Novotel", "Sheraton", "Radisson Blue", "Gołębiewski"], "Iława": ["Mer", "Novotel", "Sheraton", "Radisson", "Gołębiewski"], "Ostróda": ["Mercury", "Novotel", "Mariot", "Radisson", "Gołębiewski"], "Giżycko": ["Mercury", "Novotel", "Sheraton", "Vienna House", "Gołębiewski"], } }, "Małopolskie": { "town": { "Kraków": ["Kossak", "Novotel", "Sheraton", "Radisson", "Stary"], "Tarnów": ["Mercury", "Novotel", "Sheraton", "Tarnovia", "Ibis"], "Oświęcim": ["Mercure", "Golden Tulip", "Sheraton", "Radisson", "Hampton"], "Skała": ["Focus", "Novotel", "Sheraton", "Radisson", "Zamek"], "Wieliczka": ["Mercurius", "Novotel", "Sheraton", "Arche", "Blue Star"], } }, "Podlaskie": { "town": { "Białystok": ["Altus", "Deo", "Sheraton", "Radisson Blu", "Aquarion"], "Suwałki": ["Merr", "Novotel", "Ibis", "Radisson Red", "Arche"], "Łomża": ["Mercury 2", "Telios", "Sheraton", "Blue", "DeSilva"], "Augustów": ["Mariot", "Unicus", "Hampton", "Ibis Budget", "Ibis Styles"], "Zambrów": ["Golden", "Blue Star", "Sheraton", "Osteria", "Rafles"], } }, "Podkarpackie": { "town": { "Rzeszów": ["Blue Star", "Notel", "Radius", "Puławski", "Grębiewski"], "Jasło": ["Mercury2", "Novotel2", "Sheraton2", "Radisson2", "Gołębiewski2"], "Krosno": ["Mercury3", "Novotel3", "Sheraton3", "Radisson3", "Gołębiewski3"], "Ustrzyki Górne": ["Mercury4", "Novotel4", "Sheraton4", "Radisson4", "Gołębiewski"], "Sanok": ["Mercury5", "Novotel5", "Sheraton5", "Radisson5", "Gołębiewski5"], } }, "Mazowieckie": { "town": { "Warszawa": ["Mercury6", "Novotel6", "Sheraton6", "Radisson6", "Gołębiewski6"], "Sochaczew": ["Mercury7", "Novotel7", "Sheraton7", "Radisson7", "Gołębiewski7"], "Płock": ["Mercury8", "Novotel8", "Sheraton8", "Radisson8", "Gołębiewski8"], "Radom": ["Mercury9", "Novotel9", "Sheraton9", "Radisson9", "Gołębiewski9"], "Ciechanów": ["Mercury0", "Novotel0", "Sheraton0", "Radisson0", "Gołębiewski0"], } } } } var region = document.getElementById("region"); var town = document.getElementById("town"); var hotel = document.getElementById("hotel"); // removed attempts to init while selects are all empty function setTown() { town.innerHTML = ""; // corrected this line: let towns = Object.keys(jsonData.region[region.value].town); cmo(towns, town); setHotel(); }; function setHotel() { hotel.innerHTML = ""; // corrected this line: let hotels = jsonData.region[region.value].town[town.value]; cmo(hotels, hotel); }; function cmo(arr, s) { if (arr.length) { // added this for safety: check if it's an array before you try to iterate over it arr.forEach(o => { let opt = document.createElement("option"); opt.value = o; opt.innerHTML = o; s.add(opt); }); } } Choose a region: Select a region Warmińsko - mazurskie Małopolskie Podlaskie Podkarpackie Mazowieckie

  Choose a town:

  Choose a hotel:

You can use a List :

In your events.dart