How to populate table using for loop?

GoJS
1

I have an MVC application with view that uses JavaScript file where I get the data from MVC controller using jQuery’s AJAX call and want to populate table’s node. My code looks as following:

myDiagram.nodeTemplateMap.add("table",
    $(go.Node, go.Panel.Auto,
        $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
        { movable: true },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, "Table",
            $(go.TextBlock, "Object Properties",
            { row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),

            // drawn before row 1:
            $(go.RowColumnDefinition,
            { row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
            // drawn before column 1:
            $(go.RowColumnDefinition,
            { column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),

            for (var i = 0; i < data.ObjectPropertiesList.length; i++) {
                $(go.TextBlock, data.ObjectPropertiesList[i].Item1, { row: 1, column: 0, stroke: "green", margin: 2 }),
                $(go.TextBlock, data.ObjectPropertiesList[i].Item2, { row: 1, column: 1, margin: 2 });
            }});
}

But, there are some syntax and other errors. For example, there is syntax error on for loop.

Could you suggest me, please, how to overcome this issue?

2

In JavaScript a statement is not an expression, which is why your code is not valid.

You should have your row data in an Array which is a property on your node data object, and you should bind Panel.itemArray to that Array, and you should set the Panel.itemTemplate to be a “TableRow” Panel. Read more at GoJS Item Arrays-- Northwoods Software.

3

Here’s what I did:

myDiagram.nodeTemplateMap.add("table",
    $(go.Node, go.Panel.Auto,
        $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
        { movable: true },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, "Table",
            new go.Binding("itemArray", "people"),
            {
                defaultAlignment: go.Spot.Left,
                defaultColumnSeparatorStroke: "black",
                itemTemplate:  // the row created for each item in the itemArray
                    $(go.Panel, "TableRow",
                    $(go.TextBlock, new go.Binding("text", "property_name"),
                        { column: 0, margin: 2, font: "bold 10pt sans-serif" }),
                    $(go.TextBlock, new go.Binding("text", "property_value"),
                        { column: 1, margin: 2 })
                    )
            },
            // define the header as a literal row in the table,
            // not bound to any item, but bound to Node data
            $(go.Panel, "TableRow",
                { isPanelMain: true },  // needed to keep this element when itemArray gets an Array
                $(go.TextBlock, "Name",
                { column: 0, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" }),
                $(go.TextBlock, "Value",
                { column: 1, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" })
            ),
            $(go.RowColumnDefinition,
                { row: 0, background: "lightgray" }),
            $(go.RowColumnDefinition,
                { row: 1, separatorStroke: "black" })
            )
        ));

myPalette.model = new go.GraphLinksModel([
    { key: "B", text: "some block", color: "blue" },
    { key: "G", text: "Macro", isGroup: true },
    { category: "circle", key: "Gc", text: "A", color: "black", group: "G", loc: "0 0" },
    {
        category: "table", key: "Ga", group: "G", loc: "60 0",
        properties: [
            { property_name: "Prop1", property_value: 100 },
            { property_name: "Prop2", property_value: 200 }
        ]
    }
], [
    { from: "Gc", to: "Ga" }
]);

But, it doesn’t work as you can see at the screen shot below:

Here are 2 hard coded properties, but they’re not displayed. I also have test data and want to use for loop to populate the table.

What’s wrong now?

4

I’ve found what was wrong. The name of itemArray should be: “people”, but I put “properties”. It’s working now.

The next step is to use my test data through the for loop.

5

Excuse me, but it’s working for hard coded value. At this moment I’m not sure how to use my test data and populate the table through the loop. Here’s my code:

myPalette.model = new go.GraphLinksModel([
    { key: "B", text: "some block", color: "blue" },
    { key: "G", text: "Macro", isGroup: true },
    { category: "circle", key: "Gc", text: "A", color: "black", group: "G", loc: "0 0" },
    {
        category: "table", key: "Ga", group: "G", loc: "60 0",
        properties: [
            jQuery.each(data.ObjectPropertiesList, function(index, item) {
                properties.items.push({ property_name: item.Item1, property_value: item.Item2 });
            })
        ]
    }
], [
    { from: "Gc", to: "Ga" }
]);

that it doesn’t work.

How to achieve my task?

6

Are you familiar with what jQuery.each returns?
http://api.jquery.com/jquery.each/

7

As you can see I’m trying to use jQuery.each, but where should I add the items in order to populate the table?

8

I’m guessing that what you’re trying to do is correct.

“people” vs “properties”?

9

Yes, I’m trying to add the items to “properties”, but the table is not populated. It’s empty.

10

It doesn’t work that is the table is not populated. The code looks as following:

myDiagram.nodeTemplateMap.add("table",
    $(go.Node, go.Panel.Auto,
        $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
        { movable: true },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, "Table",
            new go.Binding("itemArray", "properties"),
            {
                defaultAlignment: go.Spot.Left,
                defaultColumnSeparatorStroke: "black",
                itemTemplate:  // the row created for each item in the itemArray
                    $(go.Panel, "TableRow",
                    $(go.TextBlock, new go.Binding("text", "property_name"),
                        { column: 0, margin: 2, font: "bold 10pt sans-serif" }),
                    $(go.TextBlock, new go.Binding("text", "property_value"),
                        { column: 1, margin: 2 })
                    )
            },
            // define the header as a literal row in the table,
            // not bound to any item, but bound to Node data
            $(go.Panel, "TableRow",
                { isPanelMain: true },  // needed to keep this element when itemArray gets an Array
                $(go.TextBlock, "Name",
                { column: 0, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" }),
                $(go.TextBlock, "Value",
                { column: 1, margin: new go.Margin(2, 2, 0, 2), font: "bold 10pt sans-serif" })
            ),
            $(go.RowColumnDefinition,
                { row: 0, background: "lightgray" }),
            $(go.RowColumnDefinition,
                { row: 1, separatorStroke: "black" })
            )
        ));

var properties = [];

myPalette.model = new go.GraphLinksModel([
    { key: "B", text: "some block", color: "blue" },
    { key: "G", text: "Macro", isGroup: true },
    { category: "circle", key: "Gc", text: "A", color: "black", group: "G", loc: "0 0" },
    {
        category: "table", key: "Ga", group: "G", loc: "60 0",
        properties: [
            jQuery.each(data.ObjectPropertiesList, function(index, item) {
                properties.push({ property_name: item.Item1.toString(), property_value: item.Item2.toString() });
            })
        ]
    }
], [
    { from: "Gc", to: "Ga" }
]);

It seems that “properties” array that was defined inside the table node is “undefined” and addition new items doesn’t work. That’s why I declared new “properties” array, but they are not the same. Right?

So, how to populate “properties” from table node?

What I get looks as following:

ss1.png729×410 21.8 KB

11

I suggest that you stop using jQuery to do simple array manipulations. http://youmightnotneedjquery.com/

12

Excuse me, but to which array I should add my test data? Could you write it, please, because I’m beginner in GoJS?

13 
    itemTemplate:  // the row created for each item in the itemArray
        $(go.Panel, "TableRow",
            $(go.TextBlock,
                new go.Binding("text", "Item1", function(x) { return x.toString(); }),
                { column: 0, margin: 2, font: "bold 10pt sans-serif" }),
            $(go.TextBlock,
                new go.Binding("text", "Item2", function(x) { return x.toString(); }),
                { column: 1, margin: 2 })
        )

    { . . .,
      properties: data.ObjectPropertiesList
    }

(assuming the value of data.ObjectPropertiesList does not change)