mercurius | Implement GraphQL servers and gateways with Fastify | GraphQL library

Remove the semicolon ; in the first insert after massa).

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:

The way that scmutils handles the integration is interesting. The state derivative function works with a local tuple as described in SICM, but the integrator wants to work with a function that takes an array of floats as input and produces an array of equal size as output. To do this, scmutils takes the initial state data and replaces the values in it with symbols and passes this to your derivative. This produces symbolic output, which can be used to prepare a function with the right signature for the integrator. (I can describe this process in greater detail if you would like).

Your problem is in Cartesian coordinates, however, and the resulting symbolic expression is hairy. You can see this process in action by creating your own symbolic state and passing it to the derivative function, and simplifying the output (by passing the result through pe (print expression)):