Vis.js JSON data to Google Spreadsheets Range

I have a little issue trying to retrieve the data from the Vis.js (here a example!) nodes position and edges related to the id, to a Google SpreadSheets range.

Here’s the code (HTML and GAS)

let nodeArray = []

data.forEach(element => {
  let obj = {}
  obj.id = element[0]
  obj.label = element[1]
  obj.title = element[2]
  obj.group = element[3]
  obj.x = element[4]
  obj.y = element[5]

  nodeArray.push(obj)
  return element
})
//Logger.log(nodeArray);
return nodeArray;
}

function lineArray() {

  const data = ss.getSheetByName("Conecciones").getRange(2, 1, ss.getLastRow() - 1, 5).getValues();

  let edgArray = []

  data.forEach(element => {
    let obj = {}
    obj.from = element[0]
    obj.label = element[2]
    obj.dashes = element[3]
    obj.to = element[4]
    edgArray.push(obj)
    return element
  })
  //Logger.log(edgArray);
  return edgArray;
}

JavaScript
​x
 
let nodeArray = []
​
data.forEach(element => {
  let obj = {}
  obj.id = element[0]
  obj.label = element[1]
  obj.title = element[2]
  obj.group = element[3]
  obj.x = element[4]
  obj.y = element[5]
​
  nodeArray.push(obj)
  return element
})
//Logger.log(nodeArray);
return nodeArray;
}
​
function lineArray() {
​
  const data = ss.getSheetByName("Conecciones").getRange(2, 1, ss.getLastRow() - 1, 5).getValues();
​
  let edgArray = []
​
  data.forEach(element => {
    let obj = {}
    obj.from = element[0]
    obj.label = element[2]
    obj.dashes = element[3]
    obj.to = element[4]
    edgArray.push(obj)
    return element
  })
  //Logger.log(edgArray);
  return edgArray;
}

<html>

<head>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>


</head>

<body>

  <div id="mynetwork"></div>
  <input type="button" id="export_button" onclick="exportNetwork()" value="export">
  <p id="input_output" style="height: 680px;"></p>

  <script type="text/javascript">
    function init() {

      container = document.getElementById('mynetwork');
      exportArea = document.getElementById('input_output');
      network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
        nodes: nodes,
        edges: edges
      }, options)).sample();

    };

    function addConnections(elem, index) {
      elem.connections = network.getConnectedNodes(index);
    }

    function exportNetwork() {
      var nodes = objectToArray(network.getPositions());
      nodes.forEach(addConnections);
      var exportValue = JSON.stringify(nodes, undefined, 2);
      exportArea.innerHTML = exportValue;
    }

    function objectToArray(obj) {
      return Object.keys(obj).map(function(key) {
        obj[key].id = key;
        return obj[key];
      });
    }

    init();
  </script>
</body>

</html>

JavaScript
 
<html>
​
<head>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
​
​
</head>
​
<body>
​
  <div id="mynetwork"></div>
  <input type="button" id="export_button" onclick="exportNetwork()" value="export">
  <p id="input_output" style="height: 680px;"></p>
​
  <script type="text/javascript">
    function init() {
​
      container = document.getElementById('mynetwork');
      exportArea = document.getElementById('input_output');
      network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
        nodes: nodes,
        edges: edges
      }, options)).sample();
​
    };
​
    function addConnections(elem, index) {
      elem.connections = network.getConnectedNodes(index);
    }
​
    function exportNetwork() {
      var nodes = objectToArray(network.getPositions());
      nodes.forEach(addConnections);
      var exportValue = JSON.stringify(nodes, undefined, 2);
      exportArea.innerHTML = exportValue;
    }
​
    function objectToArray(obj) {
      return Object.keys(obj).map(function(key) {
        obj[key].id = key;
        return obj[key];
      });
    }
​
    init();
  </script>
</body>
​
</html>

I think the problem is here, in the HTML Side 🡇

function addConnections(elem, index) {                                                                          
    elem.connections = network.getConnectedNodes(index);
  }

  function exportNetwork() {
    var nodes = objectToArray(network.getPositions());
    nodes.forEach(addConnections);
    var exportValue = JSON.stringify(nodes, undefined, 2);
    exportArea.innerHTML = exportValue;
  }

  function objectToArray(obj) {
    return Object.keys(obj).map(function (key) {
    obj[key].id = key;
    return obj[key];
    });
  }

JavaScript
 
function addConnections(elem, index) {                                                                          
    elem.connections = network.getConnectedNodes(index);
  }
​
  function exportNetwork() {
    var nodes = objectToArray(network.getPositions());
    nodes.forEach(addConnections);
    var exportValue = JSON.stringify(nodes, undefined, 2);
    exportArea.innerHTML = exportValue;
  }
​
  function objectToArray(obj) {
    return Object.keys(obj).map(function (key) {
    obj[key].id = key;
    return obj[key];
    });
  }
​

Recap:

At this point, i have problems to read the data from the google script side (its 100% tested, a it works without the “supposed problem part”)

Beforehand, thanks a lot!

Answer

How about this modification?

Modification points:

When I saw your script, I noticed the following part. Unfortunately, google.script.run returns no values. So I think that when network is used at the function exportNetwork(), an error occurs at network.getPositions(). I thought that this might be the reason of your issue.

  network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
    nodes: nodes,
    edges: edges
  }, options)).sample();

JavaScript
 
  network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
    nodes: nodes,
    edges: edges
  }, options)).sample();
​

Modified script:

When your script is modified, how about the following modification?

From:

function init() {

  container = document.getElementById('mynetwork');
  exportArea = document.getElementById('input_output');
  network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
    nodes: nodes,
    edges: edges
  }, options)).sample();

};

JavaScript
 
function init() {
​
  container = document.getElementById('mynetwork');
  exportArea = document.getElementById('input_output');
  network = google.script.run.withSuccessHandler(([nodes, edges]) => new vis.Network(container, {
    nodes: nodes,
    edges: edges
  }, options)).sample();
​
};
​

To:

let network;  // Added

function init() {
  container = document.getElementById('mynetwork');
  exportArea = document.getElementById('input_output');
  network = google.script.run.withSuccessHandler(([nodes, edges]) => {
      network = new vis.Network(container, {nodes: nodes, edges: edges}, options);  // Modified
  }).sample();
};

JavaScript
 
let network;  // Added
​
function init() {
  container = document.getElementById('mynetwork');
  exportArea = document.getElementById('input_output');
  network = google.script.run.withSuccessHandler(([nodes, edges]) => {
      network = new vis.Network(container, {nodes: nodes, edges: edges}, options);  // Modified
  }).sample();
};
​

Reference:

Class google.script.run

Unfortunately, I cannot test about your actual situation.

Advertisement

Answer

Modification points:

Modified script:

From:

To:

Reference: