JSON.parse of string from datasource fails

[Alex]

I have a field called "Genre" in the datasource  of string type  is  valid JSON.

What I use JSON.parse with the  Genre data the object created is always null.  If i explicitly create a string with the same string values that are in the Genre field and apply JSON.parse the object is valid and I can access the array. Otherwise if JSON.parse is given the "Genre" data string from the datasource the JSON object has null propeties.   

<script type="text/x-kendo-template" id="Genretemplate"><br>Genre is of type : #: jQuery.type(Genre) #<br>Genre field value : #: Genre #<br># var testGenre = '[{"id": "22","genre": "punk"}]';#<br># var myobj =JSON.parse(testGenre); #<br>Obj is of type : #: jQuery.type(myobj) #<br>#: myobj[0].genre#<br></script>

 Produces this output 

Genre is of type : string
Genre field value : [{"id":"22","genre":"punk"}]
Obj is of type : array
punk

But if I use this in the template above:

# var myobj =JSON.parse(Genre); #

I get a error :

Cannot read property '0'  of null

I have tried setting the type of Genre in the datasource to 'string' and to 'object' and also leaving it blank, but same result.



   

[Petyo]

Hi Alex,

I tried to replicate the problem here, but it seems to work as expected. What am I missing?

Regards,
Petyo
Telerik

 

 

[Alex]

Thank you  Petyou -  missing information I could have been more clear on is the  Genre field is from a remote datasource and also perhaps helpfully the template is being using in a grid.
 
 I can send the login info for the site (is password protected, and the issue is shown in the first record, once logged in) directly to you if that is useful?  

var rocondataSource = new kendo.data.DataSource({
    serverPaging: false,
    serverSorting: false,
    sortable: true,
    batch: false,
    pageSize: 80,
    transport: {
        read: {
            url: "http://urlremoved/api/roconmusic",
            dataType: "json",
            type: "GET"
        },
        update: {
            url: "http://urlremoved/api/roconmusic",
            type: "PUT"
        },
        create: {
            url: "http://urlremoved/api/roconmusic",
            type: "POST"
        },
        destroy: {
            url: "http://urlremoved/api/roconmusic",
            type: "DELETE"
        }
        },
    schema: {
        model: { "id":"id",
            fields: {
                id: { type: "number" },
                Eventdate: { type: "date",editable: true },
                Date: { type: "string",editable: true },
                Year: { type: "string",editable: true },
                Category: { type: "string",editable: true },
                Genre: {  type: "string", editable: true },
                Artist: { type: "string",editable: true },
                Band: { type: "string",editable: true },
                Entry: { type: "string",editable: true },
                vlink1: { type: "string",editable: true },
                vlink2: { type: "string",editable: true },
                vlink3: { type: "string",editable: true },
                vlink4: { type: "string",editable: true },
                vlink5: { type: "string",editable: true },
                vlink6: { type: "string",editable: true },
                status: { type: "string",editable: true },
                deathage: { type: "string",editable: true },
                cod: { type: "string",editable: true },
                metatags: { type: "string",editable: true }
            }
        }
    }
});

[Petyo]

Hello Alex,

it's unlikely that the issue you are facing is related to the grid or the remote datasource - they can't influence the string primitive or the JSON.parse implementation. You may try to extract your implementation in a normal javascript function which you will call from the template. This should make it easier to debug and hopefully give you some idea on what the actual problem is. 

Regards,
Petyo
Telerik

 

 

[Alex]

Yes you are correct is really the Javascript that is the issue as opposed to the kendoui framework. I implemented this function below the grid declaration as you suggested and had the same results where I get an array type returned for the JSON object created, but it does not have any properties and cannot be enumerated/accessed.  Must be something I am not getting with regards to Javascript;  in any case is not a problem with the framework. Thanks for your assistance.

template: function (e) {
/*
e.Genre is a string of format [{"id":"22","genre":"punk"}] retrieved from a REST datasource stored in a remote MySQL db and saved in a text field as json_encoded value from the insert/update of a kendoui multiselect control;
*/
                var obj  = jQuery.parseJSON(e.Genre);

               //all the below generate a null properties error
                return(obj.genre);
                return(obj[0].genre);
}

[Alex]

Actually it was  the syntax difference between an array and an object in javascript ; it should  have been:

myObj[0]["genre"]);

If that might help some later.