Javascript EJS string literal

Question

I am trying to pull a graphviz format string from my database and pass to a javascript function on my browser front end. I am using NodeJS and EJS as the view engine. The following code is on my index.ejs to take the array of graph formats, graph_format and send to the viz.js function:

    <script>
window.onload=function(){
  console.log("converting ejs to javascrpt")

  var jscgraph=[];
  <% graph_formats.forEach(function(graph){%>
    for(var i=0;i<graph_formats.length;i++){
      var r = "";
      r=r.concat("\"");
      r=r.concat(<%- graph%>;
      r=r.concat("\"");
      document.body.innerHTML += Viz(r);
    }
  <%
  })
  %>

  console.log("now printing javascript variable 1"+jscgraph[1])
}
</script>

However, I get a "SyntaxError: missing ) after argument list[Learn More] graphviz:206:24" error in the console of my browser and the lines " console.log("converting ejs to javascrpt")" and "console.log("now printing javascript variable 1"+jscgraph[1])" do not run.

When I go to the browser debugger at line 206 as per error message, I see the following:

<script>
window.onload=function(){
  console.log("converting ejs to javascrpt")

  var jscgraph=[];

    for(var i=0;i<graph_formats.length;i++){
      var r = "";
      r=r.concat("\"");
      r=r.concat(digraph{
});
      r=r.concat("\"");
      document.body.innerHTML += Viz(r);
    }

Where 206 is the line r=r.concat(digraph{});

He is the graph_format array copied and pasted from the nodejs console for completeness:

 [ 'digraph{\\n}\\n\\n\\n\\n\\n\\n', 'digraph{\\n0 [label="PUSH4", style=filled, color=antiquewhite]\\n1 [label="PUSH1", style=filled, color=antiquewhite]\\n2 [label="PUSH1", style=filled, color=antiquewhite]\\n3 [label="EXP", style=filled, color=coral4]\\n1 -> 3 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\\n2 -> 3 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\\n4 [label="PUSH1", style=filled, color=antiquewhite]\\n5 [label="CALLDATALOAD", style=filled, color=darkorchid4]\\n4 -> 5 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n6 [label="DIV", style=filled, color=chocolate3]\\n3 -> 6 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n5 -> 6 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\\n7 [label="EQ", style=filled, color=gold4]\\n0 -> 7 [label="000000000000000000000000000000000000000000000000000000000178b8bf", fontcolor=antiquewhite]\\n6 -> 7 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\\n8 [label="ISZERO", style=filled, color=goldenrod]\\n7 -> 8 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n9 [label="PUSH2", style=filled, color=antiquewhite]\\n10 [label="JUMPI", style=filled, color=burlywood1]\\n8 -> 10 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\\n9 -> 10 [label="0000000000000000000000000000000000000000000000000000000000000023", fontcolor=antiquewhite]\\n11 [label="JUMPDEST", style=filled, color=magenta]\\n12 [label="PUSH4", style=filled, color=antiquewhite]\\n13 [label="PUSH1", style=filled, color=antiquewhite]\\n14 [label="PUSH1", style=filled, color=antiquewhite]\\n15 [label="EXP", style=filled, color=coral4]\\n13 -> 15 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\\n14 -> 15 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\\n16 [label="PUSH1", style=filled, color=antiquewhite]\\n17 [label="CALLDATALOAD", style=filled, color=darkorchid4]\\n16 -> 17 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n18 [label="DIV", style=filled, color=chocolate3]\\n15 -> 18 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n17 -> 18 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\\n19 [label="EQ", style=filled, color=gold4]\\n12 -> 19 [label="0000000000000000000000000000000000000000000000000000000002571be3", fontcolor=antiquewhite]\\n18 -> 19 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\\n20 [label="ISZERO", style=filled, color=goldenrod]\\n19 -> 20 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n21 [label="PUSH2", style=filled, color=antiquewhite]\\n22 [label="JUMPI", style=filled, color=burlywood1]\\n20 -> 22 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\\n21 -> 22 [label="0000000000000000000000000000000000000000000000000000000000000047", fontcolor=antiquewhite]\\n23 [label="JUMPDEST", style=filled, color=magenta]\\n24 [label="PUSH4", style=filled, color=antiquewhite]\\n25 [label="PUSH1", style=filled, color=antiquewhite]\\n26 [label="PUSH1", style=filled, color=antiquewhite]\\n27 [label="EXP", style=filled, color=coral4]\\n25 -> 27 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\\n26 -> 27 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\\n28 [label="PUSH1", style=filled, color=antiquewhite]\\n29 [label="CALLDATALOAD", style=filled, color=darkorchid4]\\n28 -> 29 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n30 [label="DIV", style=filled, color=chocolate3]\\n27 -> 30 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n29 -> 30 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\\n31 [label="EQ", style=filled, color=gold4]\\n24 -> 31 [label="0000000000000000000000000000000000000000000000000000000016a25cbd", fontcolor=antiquewhite]\\n30 -> 31 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\\n32 [label="ISZERO", style=filled, color=goldenrod]\\n31 -> 32 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n33 [label="PUSH2", style=filled, color=antiquewhite]\\n34 [label="JUMPI", style=filled, color=burlywood1]\\n32 -> 34 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\\n33 -> 34 [label="000000000000000000000000000000000000000000000000000000000000006b", fontcolor=antiquewhite]\\n35 [label="JUMPDEST", style=filled, color=magenta]\\n36 [label="PUSH4", style=filled, color=antiquewhite]\\n37 [label="PUSH1", style=filled, color=antiquewhite]\\n38 [label="PUSH1", style=filled, color=antiquewhite]\\n39 [label="EXP", style=filled, color=coral4]\\n37 -> 39 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\\n38 -> 39 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\\n40 [label="PUSH1", style=filled, color=antiquewhite]\\n41 [label="CALLDATALOAD", style=filled, color=darkorchid4]\\n40 -> 41 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n42 [label="DIV", style=filled, color=chocolate3]\\n39 -> 42 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n41 -> 42 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\\n43 [label="EQ", style=filled, color=gold4]\\n36 -> 43 [label="000000000000000000000000000000000000000000000000000000005b0fc9c3", fontcolor=antiquewhite]\\n42 -> 43 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\\n44 [label="ISZERO", style=filled, color=goldenrod]\\n43 -> 44 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n45 [label="PUSH2", style=filled, color=antiquewhite]\\n46 [label="JUMPI", style=filled, color=burlywood1]\\n44 -> 46 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\\n45 -> 46 [label="00000000000000000000000000000000000000000000000000000000000000b8", fontcolor=antiquewhite]\\n47 [label="JUMPDEST", style=filled, color=magenta]\\n48 [label="PUSH4", style=filled, color=antiquewhite]\\n49 [label="PUSH1", style=filled, color=antiquewhite]\\n50 [label="PUSH1", style=filled, color=antiquewhite]\\n51 [label="EXP", style=filled, color=coral4]\\n49 -> 51 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\\n50 -> 51 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\\n52 [label="PUSH1", style=filled, color=antiquewhite]\\n53 [label="CALLDATALOAD", style=filled, color=darkorchid4]\\n52 -> 53 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n54 [label="DIV", style=filled, color=chocolate3]\\n51 -> 54 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n53 -> 54 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\\n55 [label="EQ", style=filled, color=gold4]\\n48 -> 55 [label="0000000000000000000000000000000000000000000000000000000006ab5923", fontcolor=antiquewhite]\\n54 -> 55 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\\n56 [label="ISZERO", style=filled, color=goldenrod]\\n55 -> 56 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n57 [label="PUSH2", style=filled, color=antiquewhite]\\n58 [label="JUMPI", style=filled, color=burlywood1]\\n56 -> 58 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\\n57 -> 58 [label="0000000000000000000000000000000000000000000000000000000000000116", fontcolor=antiquewhite]\\n59 [label="JUMPDEST", style=filled, color=magenta]\\n60 [label="PUSH4", style=filled, color=antiquewhite]\\n61 [label="PUSH1", style=filled, color=antiquewhite]\\n62 [label="PUSH1", style=filled, color=antiquewhite]\\n63 [label="EXP", style=filled, color=coral4]\\n61 -> 63 [label="00000000000000000000000000000000000000000000000000000000000000e0", fontcolor=antiquewhite]\\n62 -> 63 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\\n64 [label="PUSH1", style=filled, color=antiquewhite]\\n65 [label="CALLDATALOAD", style=filled, color=darkorchid4]\\n64 -> 65 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n66 [label="DIV", style=filled, color=chocolate3]\\n63 -> 66 [label="0000000100000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n65 -> 66 [label="1896f70a8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88", fontcolor=antiquewhite]\\n67 [label="EQ", style=filled, color=gold4]\\n60 -> 67 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\\n66 -> 67 [label="000000000000000000000000000000000000000000000000000000001896f70a", fontcolor=antiquewhite]\\n68 [label="ISZERO", style=filled, color=goldenrod]\\n67 -> 68 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\\n69 [label="PUSH2", style=filled, color=antiquewhite]\\n70 [label="JUMPI", style=filled, color=burlywood1]\\n68 -> 70 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n69 -> 70 [label="0000000000000000000000000000000000000000000000000000000000000163", fontcolor=antiquewhite]\\n71 [label="PUSH1", style=filled, color=antiquewhite]\\n72 [label="PUSH1", style=filled, color=antiquewhite]\\n73 [label="CALLDATALOAD", style=filled, color=darkorchid4]\\n72 -> 73 [label="0000000000000000000000000000000000000000000000000000000000000004", fontcolor=antiquewhite]\\n74 [label="ADD", style=filled, color=chocolate]\\n71 -> 74 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n73 -> 74 [label="8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88f650c575", fontcolor=antiquewhite]\\n75 [label="SLOAD", style=filled, color=chartreuse]\\n74 -> 75 [label="8851b17a825ca0cfde09020276ebce9c64cb69476c3b2e27299ccc88f650c575", fontcolor=antiquewhite]\\n76 [label="CALLER", style=filled, color=darkorchid2]\\n77 [label="EQ", style=filled, color=gold4]\\n75 -> 77 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n76 -> 77 [label="00000000000000000000000065ddc3a1f2762f3d0669bbeea44e16b2b38090a5", fontcolor=antiquewhite]\\n78 [label="ISZERO", style=filled, color=goldenrod]\\n77 -> 78 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n79 [label="ISZERO", style=filled, color=goldenrod]\\n78 -> 79 [label="0000000000000000000000000000000000000000000000000000000000000001", fontcolor=antiquewhite]\\n80 [label="PUSH2", style=filled, color=antiquewhite]\\n81 [label="JUMPI", style=filled, color=burlywood1]\\n79 -> 81 [label="0000000000000000000000000000000000000000000000000000000000000000", fontcolor=antiquewhite]\\n80 -> 81 [label="000000000000000000000000000000000000000000000000000000000000013d", fontcolor=antiquewhite]\\n82 [label="PUSH1", style=filled, color=antiquewhite]\\n83 [label="JUMP", style=filled, color=burlywood1]\\n82 -> 83 [label="0000000000000000000000000000000000000000000000000000000000000002", fontcolor=antiquewhite]\\n84 [label="JUMP", style=filled, color=burlywood1]\\n}\\n\\n\\n\\n\\n\\n' ] 

Can someone please tell me what I need to do to get the viz.js function to accept this string? It accepts strings in the form of result = Viz("digraph { a -> b; }"); as per https://www.npmjs.com/package/viz.js

Thanks

Answer 1

i think here is error:-

r=r.concat(<%- graph%>;

you need to make it :-

r=r.concat(<%- graph%>);

check in your code.

Answer 2

Your template outputs some invalid JavaScript syntax:

digraph{
}

You need to output r.concat("digraph{ }") .

You could wrap your output in double quotes:

r=r.concat('"' + <%- graph%> + '"');

But this will fail because graph contains a new line character. JavaScript strings literals with single or double quotes don't allow that.

If you don't need to support older browsers you could use backticks instead:

r=r.concat('`' + <%- graph%> + '`');

This is a "template literal" string, which can have multi-line contents.

It works in all modern browsers, but not any version of Internet Explorer. See browser compatibility to decide if you'll be able to use it.

If you do need to support older browsers, you'll need to remove any newlines from graph . If it's a string:

var cleanGraph = graph.replace(/\n/g, " ")
r=r.concat('"' + <%- cleanGraph%> + '"')

Answer 3

digraph{} is not valid JavaScript.

If you want to use an existing variable, do:

r=r.concat(digraph);

But digraph has to be declared and initialized before.