Pass array of doubles from C# to JavaScript via Nancy
I'll start by saying I'm very proficient in C# but pretty much a newbie in JS & Nancy. I'm trying to pass a 2-d array of doubles from a C#.Net Framework console app to the Graph3d package at http://visjs.org/docs/graph3d/. The Graph3d sample code works fine. I can modify their JS to do a simple 5x5 array with all array values set to 2 except the middle of the array (2,2) where the value is 22. It draws the graph as expected:
Here's the JS code that draws the above picture:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
var request = new XMLHttpRequest();
request.open('GET', 'http://192.168.1.153:1234/', true);
request.onload = function () {
// Begin accessing JSON data here
//var data = JSON.parse(this.response);
console.log(this.response);
}
request.send();
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
data.add([{x:0,y:0,z:2}]);
data.add([{x:0,y:1,z:2}]);
data.add([{x:0,y:2,z:2}]);
data.add([{x:0,y:3,z:2}]);
data.add([{x:0,y:4,z:2}]);
data.add([{x:1,y:0,z:2}]);
data.add([{x:1,y:1,z:2}]);
data.add([{x:1,y:2,z:2}]);
data.add([{x:1,y:3,z:2}]);
data.add([{x:1,y:4,z:2}]);
data.add([{x:2,y:0,z:2}]);
data.add([{x:2,y:1,z:2}]);
data.add([{x:2,y:2,z:22}]);
data.add([{x:2,y:3,z:2}]);
data.add([{x:2,y:4,z:2}]);
data.add([{x:3,y:0,z:2}]);
data.add([{x:3,y:1,z:2}]);
data.add([{x:3,y:2,z:2}]);
data.add([{x:3,y:3,z:2}]);
data.add([{x:3,y:4,z:2}]);
data.add([{x:4,y:0,z:2}]);
data.add([{x:4,y:1,z:2}]);
data.add([{x:4,y:2,z:2}]);
data.add([{x:4,y:3,z:2}]);
data.add([{x:4,y:4,z:2}]);
// specify options
var options = {
width: '100%',
height: '100%',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onresize="graph.redraw();" onload="drawVisualization()">
<div id="mygraph"></div>
</body>
</html>
Pretty straightforward.
But when I try to send that same 5x5 array from C# through Nancy to JS, the picture doesn't look the same. The data array is correct, as verified by the Console window within Firefox. Here's the erroneous picture:
Here's the C# code that uses Nancy to run the web server and pass the array to JS:
using System;
using System.IO;
using System.Reflection;
using System.Text;
using Nancy;
using Nancy.ModelBinding;
using Nancy.Conventions;
using Nancy.Hosting.Self;
namespace test3x3graph
{
class Program
{
static void Main(string[] args)
{
//Start Nancy web server
Nancy.Json.JsonSettings.MaxJsonLength = int.MaxValue;
string nancyUri = "http://localhost:4143/";
NancyHost host = new NancyHost(new Uri(nancyUri));
host.Start();
Console.WriteLine("NancyFx is running on " + nancyUri);
Console.WriteLine("\nPress any key to exit");
Console.ReadKey();
}
}
public class CustomRootPathProvider : IRootPathProvider
{
public string GetRootPath()
{
return Path.GetDirectoryName(Assembly.GetEntryAssembly().Location);
}
}
public class CustomBootstrapper : DefaultNancyBootstrapper
{
protected override IRootPathProvider RootPathProvider
{
get { return new CustomRootPathProvider(); }
}
protected override void ConfigureConventions(NancyConventions conventions)
{
base.ConfigureConventions(conventions);
conventions.StaticContentsConventions.Add(
StaticContentConventionBuilder.AddDirectory("public", @"public")
);
}
}
public class SurfaceModel
{
public static string SurfaceData = string.Empty;
//public static double[,] SurfaceData;
//static constructor to generate sample data
static SurfaceModel()
{
const int size = 5;
double[,] data = new double[size, size];
for (int i = 0; i < size; i++)
{
for (int j = 0; j < size; j++)
{
data[i, j] = 2;
}
}
data[2, 2] = 22;
//SurfaceData = data;
//convert to string representation
StringBuilder sb = new StringBuilder();
sb.Append("[");
for (int i = 0; i < size; i++)
{
for (int j = 0; j < size; j++)
{
sb.Append("[");
sb.Append(i.ToString());
sb.Append(",");
sb.Append(j.ToString());
sb.Append(",");
sb.Append(data[i, j].ToString());
sb.Append("]");
if (j < size - 1)
sb.Append(",");
}
if (i < size - 1)
sb.Append(",");
}
sb.Append("]");
SurfaceData = sb.ToString();
}
}
public class TestModule : Nancy.NancyModule
{
public TestModule()
{
Get["/"] = args =>
{
SurfaceModel model = this.Bind<SurfaceModel>();
return View["surface", model];
};
}
}
}
And finally, here's the JS code that receives the surface model from C#:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph3D test</title>
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// inject surface model here...
var surfaceData = @Model.SurfaceData;
// Called when the Visualization API is loaded.
function drawVisualization() {
console.log(surfaceData);
// Create and populate a data table.
data = new vis.DataSet();
for(var x = 0; x < surfaceData.length; x++) {
for(var y = 0; y < surfaceData[x].length; y++) {
data.add([
{
x: x,
y: y,
z: surfaceData[x][y]
}
]);
}
}
// specify options
var options = {
width: '100%',
height: '100%',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onresize="graph.redraw();" onload="drawVisualization()">
<div id="mygraph"></div>
</body>
</html>
That JS is nearly identical to the JS that works; only the data portion is different. All the Graph3d options are the same, so it's very confusing to me that the pictures don't render the same.
Also notice in the C# that the double array is converted to a string representation before sending to JS. When I try to pass it as an array of doubles, the resulting picture is blank. If a solution can be found using the string representation, fantastic. But it would be so much cleaner to be able to avoid that intermediate step and pass the array of doubles directly to JS.
Thanks for any advice.
Solution
I was able to get this working, using the Json.NET serializer. It was VERY surprising to me that JsonConvert.SerializeObject does not add the single-quotes that allow JSON.Parse to deserialize the string without error.
In any case, here's the relevant C# code:
//create a 1-dimensional array to send to Javascript.
//the first item is the number of rows; the 2nd item is the number of columns;
//the remaining items are the values from the 2-d array in row-major order
double[] data1d = new double[size*size + 2];
data1d[0] = data1d[1] = size;
int k = 2;
for (int i = 0; i < size; i++)
{
for (int j = 0; j < size; j++)
{
data1d[k++] = data[i, j];
}
}
SurfaceData = "'" + JsonConvert.SerializeObject(data1d) + "'";
And here's the relevant Javascript code:
// inject surface model here.
// Model.Surface data is a 2-dimensional array stored in a 1-dimensional array as follows:
// Array item [0] is the number of rows. Array item [1] is the number of columns.
// The remaining array items are the values from the 2-d array in row-major order
var surfaceData = JSON.parse(@Model.SurfaceData);
// Called when the Visualization API is loaded.
function drawVisualization() {
console.log(surfaceData);
// Create and populate a data table.
data = new vis.DataSet();
var k = 2;
for(var x = 0; x < surfaceData[0]; x++) {
for(var y = 0; y < surfaceData[1]; y++) {
data.add([{x: x, y: y, z: surfaceData[k++]}]);
}
}
- PDF file creation using html-pdf is not working in my deployment server?
- Not iterating over map in node js
- Select text in textarea, delete it by backspace/delete to add CSS for another element
- Jquery : Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': missing ) after argument list
- center megamenu div under nav button
- Firebase Authentication: Where is the token stored in web?
- plugin:vite:import-analysis - Failed to parse source for import analysis because the content contains invalid JS syntax. - Vue 3
- SCRAM-SERVER-FIRST-MESSAGE: client password must be a string
- Where Am I Going Wrong Here - JAVASCRIPT
- Why does the function expression in an IIFE have to be wrapped in parentheses?
- In an object-destructuring declaration, what do the identifiers on the target side refer to?
- Can I destructure an object property into a property of another object?
- How does the object destructuring syntax work in ES6?
- How does nested destructuring work in ES6?
- Why does choosing module imports not work like destructuring?
- What is “fail-soft destructuring”?
- navigator.clipboard.readText() is not working in Firefox
- Why does console.log on a WeakSet give <items unknown> in node.js?
- Why do I need a WeakMap to store private data, as opposed to just closing over a variable with limited scope?
- Get url params in API route handler in Next.js
- How to move all Custom Element related into separate file to be imported & reused
- How to fetch data server-side in the latest Next.js? Tried getStaticProps but it's not running and getting undefined
- How to render my components in a tree structure, like default file structure in IDE using React
- Contentful API returning 'version mismatch' on entry update
- jqGrid dynamically change search operator type on button click
- JS making loop animation for a progress-bar
- Given an array of numbers(arr) and the length of the array(n) as arguments, how do you create a tribonacci sequence?
- "Could not read source map for chrome-error..." when using Visual Studio Code to debug JavaScript in Edge
- LeetCode Question - 2634. Filter Elements from Array
- How to get {[space][caret][space]} and {{[space][caret][space]}}