How to Pass JSON object to GOJS javascript file from Java/Prime Faces

Question

I have a java class which returns a JSON object and I need to pass this JSON object to gojs javascript, here is the sample of my gojs javascript file(gojs_org_view.js)

function init() {
    var g = go.GraphObject.make;  // for conciseness in defining templates
    myDiagram = new go.Diagram("myDiagram"); // must be the ID or reference to div
    var graygrad = g(go.Brush, go.Brush.Linear, { 0: "rgb(125, 125, 125)", 1: "rgb(86, 86, 86)", 1: "rgb(86, 86, 86)" });
    var unassocArray =[{"id":"12" , "name":"Bugs Bunny", "title":"Head Bunny"}, 
{"id":"13" , "name":"Honey Bunny", "title":"Wife Bunny"}, 
{"id":"14" , "name":"Lola Bunny", "title":"Lil' Bunny"}, 
{"id":"15" , "name":"Mickey Mouse", "title":"Looney In Charge"}];

//some javascript code...........

function save() {
    var json = JSON.parse(myDiagram.model.toJson());
  document.getElementById("mySavedModel").value = JSON.stringify(json.nodeDataArray, null, '  ');
  }
  function load() {
    var nodeDataArray = 
[ {"id":"1", "pid":"1", "name":"Corrado 'Junior' Soprano", "title":"The Boss", "email":"[email protected]"},
    {"id":"2", "pid":"1", "name":"Tony Soprano", "title":"Underboss", "email":"[email protected]"},
    {"id":"3", "pid":"1", "name":"Herman 'Hesh' Rabkin", "title":"Advisor", "email":"[email protected]"},
    {"id":"4", "pid":"2", "name":"Paulie Walnuts", "title":"Capo", "email":"[email protected]"},
    {"id":"5", "pid":"2", "name":"Ralph Cifaretto", "title":"Capo MIA", "email":"[email protected]"},
    {"id":"6", "pid":"2", "name":"Silvio Dante", "title":"Consigliere", "email":"[email protected]"}];
    var model = new go.TreeModel();
    model.nodeKeyProperty = "id";
    model.nodeParentKeyProperty = "pid";
    model.nodeDataArray = nodeDataArray;
    myDiagram.model = model;
    myDiagram.undoManager.isEnabled = true;
  }
    function onSelectionChanged(e) {
    var node = e.diagram.selection.first();
    if (node instanceof go.Node) {
      updateProperties(node.data);
    } else {
      updateProperties(null);
    }
  }

  // Update the HTML elements for editing the properties of the currently selected node, if any
  function updateProperties(data) {
    if (data === null) {
      jQuery("#selected").css('visibility', 'hidden');
      jQuery("#name").html("");
      jQuery("#title").html("");
      jQuery("#email").html("");
      jQuery("#site").html("");
      jQuery("#superior").html("");

    } else {

      jQuery("#selected").css('display', 'block');
      jQuery("#name").html("ID: " + data.id  + " Name: " + data.fullname || "");
      jQuery("#title").html("Title: " + data.title || "");
      jQuery("#email").html("Email: " + data.email || "");
      jQuery("#site").html("Site: " + data.siteName || "");
      jQuery("#superior").html("Superior: " + data.pname || "");
    }
  }

The javascript variables unassocArray and nodeDataArray are hard-coded instead these values have to come from java class or xhtml(I am not sure which is the best method to send JSON object to gojs javascript file since am new to prime faces and JSON). Here is the xhtml code calling gojs

<p:panel id="relationshipsPanel">
                <h:outputScript library="js" name="go.js" />
                <h:outputScript library="js" name="gojs_org_view.js" />
                <h:outputStylesheet library="css" name="gojs_org_view.css"/>
                <div id="sample">
                    <div id="myPalette" class="myPaletteClass"></div>
                    <div id="myDiagram" class="myDiagramClass"></div>
                    <div id="myOverview" class="inner"></div>
                    <div id="selected" class="selectedClass"></div>
                </div> 
            </p:panel>

I tried the hidden value as below, I added following line in my view

In gojs_org_view.js i did
window.console.log("RANA ORG JSON--------------------->"+document.getElementById("relationshipsForm:arrVal").value); var nodeDataArray = JSON.parse(document.getElementById("relationshipsForm:arrVal").value);

In the console am getting the following JSON object from view to the javascript but its throwing error "Uncaught SyntaxError: Unexpected token i" at var nodeDataArray = JSON.parse(document.getElementById("relationshipsForm:arrVal").value);

Answer 1

You can request data from server using an AJAX call and get the data. if that is not an option then you can put the data in a hidden field on the page and then access it in your load() function, like you are doing it in your save() function using document.getElementById.