EditableGrid fails to load inline json data

Question

I'm trying to use EditableGrid with data in json format that is inside the script itself, but I'm getting error messages.

This is using the latest code from Github so it's supposedly version 3.0

Any ideas? Thanks in advance.

Code sample:

var jsonData = {
    "metadata":[
        {"name":"name","label":"NAME","datatype":"string","editable":true},
        {"name":"firstname","label":"FIRSTNAME","datatype":"string","editable":true},
        {"name":"age","label":"AGE","datatype":"integer","editable":true},
        {"name":"height","label":"HEIGHT","datatype":"double(m,2)","editable":true},
        {"name":"country","label":"COUNTRY","datatype":"string","editable":true,"values":
            {
                "Europe":{"be":"Belgium","fr":"France","uk":"Great-Britain","nl":"Nederland"},
                "America":{"br":"Brazil","ca":"Canada","us":"USA"},
                "Africa":{"ng":"Nigeria","za":"South-Africa","zw":"Zimbabwe"}}
            },
        {"name":"email","label":"EMAIL","datatype":"email","editable":true},
        {"name":"freelance","label":"FREELANCE","datatype":"boolean","editable":true},
        {"name":"lastvisit","label":"LAST VISIT","datatype":"date","editable":true}
    ],

    "data":[
        {"id":1, "values":{"country":"uk","age":33,"name":"Duke","firstname":"Patience","height":1.842,"email":"patience.duke@gmail.com","lastvisit":"11\/12\/2002"}},
        {"id":2, "values":["Rogers","Denise",59,1.627,"us","rogers.d@gmail.com","","07\/05\/2003"]},
        {"id":3, "values":{"name":"Dujardin","firstname":"Antoine","age":21,"height":1.73,"country":"fr","email":"felix.compton@yahoo.fr","freelance":true,"lastvisit":"21\/02\/1999"}},
        {"id":4, "values":{"name":"Conway","firstname":"Coby","age":47,"height":1.96,"country":"za","email":"coby@conwayinc.com","freelance":true,"lastvisit":"01\/12\/2007"}},
        {"id":5, "values":{"name":"Shannon","firstname":"Rana","age":24,"height":1.56,"country":"nl","email":"ranna.shannon@hotmail.com","freelance":false,"lastvisit":"07\/10\/2009"}},
        {"id":6, "values":{"name":"Benton","firstname":"Jasmine","age":61,"height":1.71,"country":"ca","email":"jasmine.benton@yahoo.com","freelance":false,"lastvisit":"13\/01\/2009"}},
        {"id":7, "values":{"name":"Belletoise","firstname":"AndrÃ©","age":31,"height":1.84,"country":"be","email":"belletoise@kiloutou.be","freelance":true,"lastvisit":""}},
        {"id":8, "values":{"name":"Santa-Maria","firstname":"Martin","age":37,"height":1.80,"country":"br","email":"martin.sm@gmail.com","freelance":false,"lastvisit":"12\/06\/1995"}},
        {"id":9, "values":{"name":"Dieumerci","firstname":"AmÃ©dÃ©","age":37,"height":1.81,"country":"ng","email":"dieumerci@gmail.com","freelance":true,"lastvisit":"05\/07\/2009"}},
        {"id":10,"values":{"name":"Morin","firstname":"Wanthus","age":46,"height":1.77,"country":"zw","email":"morin.x@yahoo.json.com","freelance":false,"lastvisit":"04\/03\/2004"}}
    ]};

$(function() {
    editableGrid = new EditableGrid("EdiTable");
    editableGrid.load(jsonData);
    editableGrid.renderGrid("tablecontent");
});

The html code contains a div with id=tablecontent

mpromonet · Answer 1 · 2018-02-18T16:54:16.440

I guess the error message you got is something like :

Who is calling me now ? EditableGrid.prototype.init@http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid.js:168:15 EditableGrid@http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid.js:121:49 @file:///home/michel/a.html:45:20 n.Callbacks/j@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:26855 n.Callbacks/k.fireWith@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:27673 .ready@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29465 I@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29656

In such a case it is because some parts of editablegrid are missing.
You should, like in the demo include :

<!-- include javascript and css files for the EditableGrid library -->
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid.js"></script>
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid_editors.js"></script>
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid_renderers.js"></script>
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid_utils.js"></script>
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid_validators.js"></script>

This should solve the problem.

score 2 · Answer 2 · answered Sep 17 '14 at 05:36

2

Change.

editableGrid.load(jsonData);

To.

editableGrid.load({"metadata": jsonData.metadata, "data": jsonData.data});

DEMO

answered Sep 17 '14 at 05:36

vikrant singh

2,091
1
12
16

1

I don't see how this is different from what I was doing. I noticed that your demo is using version 2.0.1 though, are you sure that it will work for 3.0? – isapir Sep 17 '14 at 15:35
I am not sure about 3.0 ,but I think It should work :) – vikrant singh Sep 18 '14 at 05:53

score 0 · Answer 3 · answered Dec 19 '16 at 12:33

0

i got this error when, i passed empty object in data , thus not passing the data to the function.

When i passed proper object, this issue did not come

answered Dec 19 '16 at 12:33

Akshay Vijay Jain

13,461
8
60
73

EditableGrid fails to load inline json data

3 Answers3

DEMO