Recalculate a lookup table list at runtime

Hello,
I need in EDIT page to recalculate at runtime a lookup table field (x_IDListinoTariffa) refilling it with options from a SQL SELECT based on four other fields, every time the user changes one of the four fields x_IDStruttura,x_IDSezione,x_IDAnno,x_IDFasciaOraria.
If the user changes one of the four fields, the lookup table options in x_IDListinoTariffa must be recalculate and the listbox repopulated.

I started from the “Ajax by API and Client Scripts” example in Lookup guide item.

So I have in Api_Action the following code:

public class GetDomandeIDListinoTariffaController : ApiController {
    [HttpGet("{pidstruttura}/{pidsezione}/{pidanno}/{pidfasciaoraria}")]
    public IActionResult Get([FromRoute] string pidstruttura, string pidsezione, string pidanno, string pidfasciaoraria) {
        string sSQL=$"SELECT IDListino, Denominazione, IDStruttura, IDSezione, IDAnno, IDFasciaOraria FROM listini WHERE CodTipo='R' AND IDStruttura='{pidstruttura}' AND (IDAnno IS NULL OR IDAnno='{pidanno}') AND (IDSezione IS NULL OR IDSezione='{pidsezione} AND (IDFasciaOraria IS NULL OR IDFasciaOraria='{pidfasciaoraria}')";
        var res = ExecuteRows(sSQL);
        return Json(res);
     }
 }

And in Client scripts/Table-Specific/Edit Page/Startup Script the following code:

$("#x_IDSezione").on("change", function (e) { 
    $.get(ew.getApiUrl("GetDomandeIDListinoTariffa/" + $("#x_IDStruttura").val() + "/" + $("#x_IDSezione").val() + "/" + $("#x_IDAnno").val() + "/" + $("#x_IDFasciaOraria").val()), function(res) {
    	if (res) {
    		console.log(res);		    
        	$('#x_IDListinoTariffa').select2(res).trigger('change');
    	}
    });
});

The code works ok: every time I change the x_IDSezione field the api method is called and the correct records retrieved.
My problem is that the destination field x_IDListinoTariffa is not updated: it looses its “option template” formatting but the options remain the same.
What’s wrong? How can I fill a SELECT2 lookup table destination field in the correct way, WITHOUT loosing its “option template” formatting?
I’m using AspNetMaker 2021 in this project but it should be the same.
Any idea?

It may be similar to:

Yes, but I need your help in the final step:
the following command doesn’t work
$('#x_IDListinoTariffa').select2(res).trigger('change');
Whats the correct ANM command to refill a select2 field with the json result of the api call? There isn’t any example in the help guide. Thank you

This is standard JavaScript. You can refer to select2 documentation for examples.

I tried that, my command is from select2 docs but there is something that doesn’t work.

  1. is there any native function in ANM to convert from api response json to the format expected by select2?
  2. while filling the options, how can i maintain the formatting of the option template? How can I retrieve the option template value for the select?

Use console.log(…) to write out to json. You can then write your codes in JavaScript convert the json data to whatever format you need.