Grid with existing JSON object not populating

[Aaron]

I have already performed an ajax call to retrieve JSON.  Part of the JSON result is used to display a graph, and another is intended to be used in the grid.  When I set this up, I cannot get the data to display....I see an accurate count of records, but in the columns, I just see "unefinedundefinedundefinedundefined".  Consequently, the JSON seems to work just fine to render the graph, but not the grid.  I have also attached a screenshot.  Here is what the code/HTML looks like:

JSON looks like this (just copied first few records...):
[{"p":"hasLogonId","s":"AD#10145","o":"AD_SID#S-1-5-21-1123561945-492894223-1417001333-12823"},{"p":"hasDtgStartU","s":"AD#113317","o":"1344848836"},{"p":"hasDtgEndU","s":"AD#128486","o":"1344855539"},{"p":"hasType","s":"AD#129917","o":"AD_logonType#3"},{"p":"hasAcctName","s":"AD#131092","o":"AD_acctName#3w546r1$"}]

Javascript:
           

    $(document).ready(function() {

        // Populate arrays for the menu items

        var Qdata = [{"title":"query 3","description":"Return a graph of source and destination IPs limited to 5000"},{"title":"query 4","description":"Show list of all predicates and counts of each"},{"title":"query 5","description":"Show ontology"},{"title":"query 1","description":"DNS relationships 1000"},{"title":"query 6","description":"return first 500"},{"title":"query 6","description":"return first 500"}];

        var Edata = [{"ep":"discover","title":"discover"},{"ep":"sc1","title":"sc1"},{"ep":"marple","title":"marple"}];

        var JSO;

        // Dropdown menu for the queries

        $("#query-picker").kendoDropDownList({

            optionLabel: "Queries",

            dataTextField: "description",

            dataValueField: "title",

            dataSource: Qdata,

            index: 0,

            enable: false,

            change: onChangeQ

        });

        // Dropdown menu for the endpoints

        $("#endpoint-picker").kendoDropDownList({

            optionLabel: "Endpoints",

            dataTextField: "title",

            dataValueField: "ep",

            dataSource: Edata,

            index: 0,

            change: onChangeE

        });

         

        // OnChange event for endpoint dropdown

        var epval;

        function onChangeE() {

            ddlist=$("#query-picker").data("kendoDropDownList");

            ddlist.enable(true);

            epval=$("#endpoint-picker").data("kendoDropDownList");

        };

        // OnChange event for query dropdown

        function onChangeQ() {

            var qval=$("#query-picker").data("kendoDropDownList");

             

            $.getJSON('./query?ep=' + epval.value() + '&qry=' + qval.value(), function(JSO) {

                $("#graph-container").empty();

                 

                var sigInst = sigma.init(document.getElementById('graph-container')).drawingProperties({

                    defaultLabelColor: '#fff',

                    defaultLabelSize: 14,

                    defaultLabelBGColor: '#fff',

                    defaultLabelHoverColor: '#000',

                    labelThreshold: 6,

                    defaultEdgeType: 'curve'

                }).graphProperties({

                        minNodeSize: 1,

                        maxNodeSize: 10,

                        minEdgeSize: 1,

                        maxEdgeSize: 1

                    }).mouseProperties({

                        maxRatio: 32

                });

                $.each(JSO.data.results.graph.nodes, function(idx,obj) {

                    sigInst.addNode(obj.index,{'color' : '#E68A00','x':Math.random(),'y':Math.random(),'size' : obj.degree, 'shape' : 'circle', 'label' : obj.label, 'degree' : obj.degree});

                });

                $.each(JSO.data.results.graph.edges, function(idx,obj) {

                    sigInst.addEdge(obj.index, obj.source, obj.target, { 'label' : obj.label});

                });

                sigInst.draw();

                 

                var kdata=JSON.stringify(JSO.data.results.triples);

                alert(kdata);

                $("#main-body-TR").kendoGrid({

                    dataSource: {

                        data: JSO.data.results.triples,

                        schema: {

                            model: {

                                fields: {

                                    s: { type: "string" },

                                    p: { type: "string" },

                                    o: { type: "string" }

                                }

                            }

                        }

                    },

                    scrollable: true,

                    sortable: true,

                    filterable: true,

                    pageable: {

                        input: true,

                        numeric: false

                    },

                    columns: [

                        {

                            field: "s",

                            title: "Subject"

                        },

                        {

                            field: "p",

                            title: "Predicte"

                        },

                        {

                            field: "o",

                            title: "Object"

                        }

                    ]

                });

                 

                var isRunning = false;

                document.getElementById('stop-layout').addEventListener('click',function(){

                  if(isRunning){

                    isRunning = false;

                    sigInst.stopForceAtlas2();

                    document.getElementById('stop-layout').childNodes[0].nodeValue = 'Start Layout';

                  }else{

                    isRunning = true;

                    sigInst.startForceAtlas2();

                    document.getElementById('stop-layout').childNodes[0].nodeValue = 'Stop Layout';

                  }

                },true);

                document.getElementById('rescale-graph').addEventListener('click',function(){

                  sigInst.position(0,0,1).draw();

                },true);

                 

                var greyColor = 'rgba(180,180,180,0.3)';

                sigInst.bind('overnodes',function(event){

                  var nodes = event.content;

                  var neighbors = {};

                  sigInst.iterEdges(function(e){

                    if(nodes.indexOf(e.source)<0 && nodes.indexOf(e.target)<0){

                      if(!e.attr['grey']){

                        e.attr['true_color'] = e.color;

                        e.color = greyColor;

                        e.attr['grey'] = 1;

                      }

                    }else{

                      e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;

                      e.attr['grey'] = 0;

                

                      neighbors[e.source] = 1;

                      neighbors[e.target] = 1;

                    }

                  }).iterNodes(function(n){

                    if(!neighbors[n.id]){

                      if(!n.attr['grey']){

                        n.attr['true_color'] = n.color;

                        n.color = greyColor;

                        n.attr['grey'] = 1;

                      }

                    }else{

                      n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;

                      n.attr['grey'] = 0;

                    }

                  }).draw(2,2,2);

                }).bind('outnodes',function(){

                  sigInst.iterEdges(function(e){

                    e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;

                    e.attr['grey'] = 0;

                  }).iterNodes(function(n){

                    n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;

                    n.attr['grey'] = 0;

                  }).draw(2,2,2);

                });

            });

        };

        $("body").on({

            ajaxStart: function() {

                $("#loading-query").removeAttr('style');

            },

            ajaxStop: function() {

                $("#loading-query").css('display','none');

            }

        });

    });

[Aaron]

OK...While waiting for a response (still none)...have been trying a few things.  I stumbled on the fix, which I am still not sure of how or why it didn't work in the first place.  The short version is that by changing the actual strings used for my keys, it now works.  Below is an example of the JSON response before and after.  By changing the keys from "s", "p", and "o" to "sub", "pred", and "obj", respectively, it now loads just fine...

I don't see anything in the JSON specification that forbids these characters being used as keys...Any ideas where this error might be occurring?

NOT WORKING:

[

    {"s":"one","p":"knows","o":"two"},

    {"s":"one","p":"knows","o":"three"},

    {"s":"one","p":"knows","o":"four"},

    {"s":"one","p":"knows","o":"five"}

]

WORKING:

[

    {"sub":"one","pred":"knows","obj":"two"},

    {"sub":"one","pred":"knows","obj":"three"},

    {"sub":"one","pred":"knows","obj":"four"},

    {"sub":"one","pred":"knows","obj":"five"}

]

[Rosen]

Hello Aaron,

I have looked at the code you have provided. The behavior you are observing is caused by the field name o in the record to which Grid widget is bound. The template which is generated to render the row element will use an o variable in its body which will override the data record field. Therefore, it is not possible to use o as a field name and you should consider renaming it.

Regards,
Rosen
the Telerik team