How to load nested json into GoJS Regrouping in JavaScript?

by

I am trying to convert my json to the GoJs regrouping but I am having difficulties.
The regrouping example is as follows: https://gojs.net/latest/samples/regrouping.html

I am using a recursive function in which I am checking all the elements of json but when converting it to graphics in GoJS it is being interpreted in a limited way dynamic. As you can see:

function navigate() {

    var traverse = function(obj, fn) {
        for (var key in obj) {
            fn.apply(this,[key ,obj[key]]);
            if (obj[key] !== null && typeof(obj[key]) == "object") {
                traverse(obj[key], fn);
            }
        }
    }

My json is:

{
    "breakfast_menu": {
        "food": [
            {
                "name": "Strawberry Belgian Waffles",
                "price": "$7.95",
                "description": "Light Belgian waffles covered with strawberries and whipped cream",
                "calories": 900
            },
            {
                "name": "Berry-Berry Belgian Waffles",
                "price": "$8.95",
                "description": "Light Belgian waffles covered with an assortment of fresh berries and whipped cream",
                "calories": 900
            },
            {
                "name": "French Toast",
                "price": "$4.50",
                "description": "Thick slices made from our homemade sourdough bread",
                "calories": 600
            },
            {
                "name": "Homestyle Breakfast",
                "price": "$6.95",
                "description": "Two eggs, bacon or sausage, toast, and our ever-popular hash browns",
                "calories": 950
            }
        ]
    }
}

2 thoughts on “How to load nested json into GoJS Regrouping in JavaScript?”

  1. Here’s a complete demo:

    <!DOCTYPE html>
<html>
<head>
  <title>Nested Groups from tree-structured JSON</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "ModelChanged": function(e) {     // just for demonstration purposes,
            if (e.isTransactionFinished) {  // show the model data in the page's TextArea
              document.getElementById("mySavedModel").textContent = e.model.toJson();
            }
          }
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white" }),
        $(go.Panel, "Table",
          { margin: 4 },
          $(go.TextBlock, { row: 0 }, new go.Binding("text", "name")),
          $(go.TextBlock, { row: 1 }, new go.Binding("text", "price")),
          $(go.TextBlock, { row: 2 }, new go.Binding("text", "calories"),
            new go.Binding("stroke", "calories", function(c) { return c > 750 ? "red" : "black"; }))
        )
      );

    var json = {
        "breakfast_menu": {
            "food": [
                {
                    "name": "Strawberry Belgian Waffles",
                    "price": "$7.95",
                    "description": "Light Belgian waffles covered with strawberries and whipped cream",
                    "calories": 900
                },
                {
                    "name": "Berry-Berry Belgian Waffles",
                    "price": "$8.95",
                    "description": "Light Belgian waffles covered with an assortment of fresh berries and whipped cream",
                    "calories": 900
                },
                {
                    "name": "French Toast",
                    "price": "$4.50",
                    "description": "Thick slices made from our homemade sourdough bread",
                    "calories": 600
                },
                {
                    "name": "Homestyle Breakfast",
                    "price": "$6.95",
                    "description": "Two eggs, bacon or sausage, toast, and our ever-popular hash browns",
                    "calories": 950
                }
            ]
        }
    };

    function flattenJson(json) {
      var arr = [];
      for (var p in json) {
        var d = { key: arr.length, isGroup: true, text: p };
        arr.push(d);
        var item = json[p];
        for (var q in item) {
          var d2 = { key: arr.length, isGroup: true, group: d.key, text: q };
          arr.push(d2);
          var list = item[q];
          if (Array.isArray(list)) {
            for (var i = 0; i < list.length; i++) {
              var d3 = list[i];
              d3.key = arr.length;
              d3.group = d2.key;
              arr.push(d3);
            }
          }
        }
      }
      return arr;
    }

    myDiagram.model = new go.GraphLinksModel(flattenJson(json));
  }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>

    Without even bothering to define a custom Group template, this produces:
    nested groups from tree-structured JSON

    Of course in your app you’ll want to define your own group templates.
    And you can remove the "ModelChanged" listener which is just here to show you the model resulting from calling flattenJson on your data.

    Reply

Leave a Comment