Transforming a nested F# list to Javascript using tail recursion

If I need some javascript in a Suave view, I can include a reference to an external javascript like in the following code:

script ["type","text/javascript"; "src","/externalJavascript.js"] []

Another way to insert javascript code is by adding the code directly by the Raw tag:

script [] [Raw("alert('hello');")]

I can use both way to pass parameters to the external javascript file:

script [] [Raw("var myVar = 123")];
script ["type","text/javascript"; "src","/externalJavascript.js"] []

In this way, the externalJavascript.js may access to the myVar variable as a global variable.

This can be a "hack" to pass parameters to the javascript.

The reason for doing it is being able to make the html page richer, avoiding "round trip" with the server. In this case I wanted to be able to  to add and remove dinamically some element to the options list, on the base of the element selected in another select option list.


However using this way to pass parameters, means generating the javascript code as a string.

An example is if I have a nested list in F#, as follows:

[(1,[(1,2M);(3,4M)]);(11,[(11,22M);(33,44M)] ) ]

and I want to transform in an equivalent javascript map:

new Map([[11, new Map([[11,22],[33,44],])],[1, new Map([[1,2],[3,4],])],]);

From the web page perspective, the key of the map (11) is the element that, when selected in the first select option list, will change the content of the second select option list, populating it with its value, which is a list with two pairs: (11,22), (33,44)

(as you can imagine, such data comes from a database, and is generated by a combination of map operations):

	// specificCustomAddQuantitiesForIngredients: Map<int,Db.IngredientPrice list>
	let mappedSpecificCustomAddQuantititesForAddIngredients =
	specificCustomAddQuantitiesForIngredients |> Map.toList |>
	List.map (fun (x,y:Db.IngredientPrice list) -> (x,y |>
	List.map (fun (z:Db.IngredientPrice) -> (z.Ingredientpriceid, z.Quantity) )))

view raw mapFragment.fs hosted with ❤ by GitHub

I tried to solve using regular expressions, but the way regular expressions changes from unix (vim) style and the dot.net libraries is annoying for me. So I decided that  a tail recursive function could be cleaner and better, so I come up with the following:

	let intPairsMapToJavascriptString l =
	let rec javascriptListPairs l acc =
	match l with
	| (A:int,B:decimal)::T -> javascriptListPairs T (acc + "["+(string)A + ","+(string)B+"]"+",")
	| _ -> acc
	let rec javascriptIntTolistPairsMap l acc =
	match l with
	| (A : int, B : ((int*decimal) List)):: T -> javascriptIntTolistPairsMap T acc+"[" + (string) A + ", " + "new Map(["+ (javascriptListPairs B "") + "])],"
	| _ -> acc
	"new Map([" + (javascriptIntTolistPairsMap l "") + "]);"

view raw intPairsMapToJavascriptString.fs hosted with ❤ by GitHub

I'm sure there are cleaner ways to enrich the view, for instance using frameworks like Fable and Elmish, but I haven't found yet the time to try to figure out how to integrate them.

So at the moment, the solution is just using F# with Suave.IO (and Postgres), adding some "tricks" if I need to make the page more dynamic on the client side.

EDIT: instead of using a recursive function, I can just use the fold operator:
for instance the first inner function can be rewritten as follows:

let javascriptListPairs l = l |> List.fold (fun acc (x,y)  -> acc + "["+(string)x+","+(string)y+"],") ""