zainul zainul - 4 months ago 15
Javascript Question

Converting JSON object into C# list

before posting this question I tried other related posts but it didn't work out, so posting here.

I have got a Json stored in a hidden field that I am accessing in code behind file of my Mark-up page. I need to convert this Json into List and bind it to a grid, but while de-serializing it throws error saying "Unexpected error encountered while parsing values ''".

Script for getting data from grid and making a Json object.

function BeforeSorting() {
var list = UpdateDataSource();
$("#SortingField").val(list);
}
function UpdateDataSource() {
var list="";
var grid = $find("DetailsGrid");
var rows = grid.get_rows();
for(var i =0 ; i<rows.get_length();i++){
var name = rows.get_row(i).get_cellByColumnKey("Name").get_value();
var country = rows.get_row(i).get_cellByColumnKey("Country").get_value();
var gender = rows.get_row(i).get_cellByColumnKey("Gender").get_value();
var age = rows.get_row(i).get_cellByColumnKey("Age").get_value();
var uniqueKey = rows.get_row(i).get_cellByColumnKey("UniqueKey").get_value();

list = list + '{"Name":"' + name + '", "Country":"' + country + '", "Gender":"' + gender + '", "Age":' + age + ', "UniqueKey":' + uniqueKey + '},';
}
list = "["+list.substr(0, list.length - 1)+"]";
return JSON.parse(list);
}


The model class:

public class Details
{
public string Name { get; set; }
public string Gender { get; set; }
public string Country { get; set; }
public int UniqueKey { get; set; }
public int Age { get; set; }
}


The code for de-serializing the json and retrieving data as a list of the model class.

protected void DetailsGrid_ColumnSorted(object sender, Infragistics.Web.UI.GridControls.SortingEventArgs e)
{
var dataSource = SortingField.Value;
List<Details> result = (List<Details>)Newtonsoft.Json.JsonConvert.DeserializeObject(dataSource, typeof(List<Details>));
DetailsGrid.DataSource = result;
DetailsGrid.DataBind();
}


The json string as obtained:

"[{"Name":"Jerry", "Country":"U.S.A.", "Gender":"Male", "Age":20, "UniqueKey":1},{"Name":"Tom", "Country":"U.K", "Gender":"Male", "Age":10, "UniqueKey":2},{"Name":"George", "Country":"Gremany", "Gender":"Male", "Age":38, "UniqueKey":3},{"Name":"Kate", "Country":"France", "Gender":"Female", "Age":40, "UniqueKey":4},{"Name":"Jenny", "Country":"Poland", "Gender":"Female", "Age":25, "UniqueKey":5}]"

Answer

create list as an array and add items as JavaScript objects and then convert it to JSON using JSON.stringify

function UpdateDataSource() {        
    var grid = $find("DetailsGrid");
    var rows = grid.get_rows();
    var list = [];
    for(var i =0 ; i < rows.get_length(); i++){
        var item = {
            Name : rows.get_row(i).get_cellByColumnKey("Name").get_value(),
            Country : rows.get_row(i).get_cellByColumnKey("Country").get_value(),
            Gender : rows.get_row(i).get_cellByColumnKey("Gender").get_value(),
            Age : rows.get_row(i).get_cellByColumnKey("Age").get_value(),
            UniqueKey : rows.get_row(i).get_cellByColumnKey("UniqueKey").get_value()
        };

        list.push(item);
    }
    return JSON.stringify(list);
}

The code for de-serializing the json and retrieving data as a list of the model class can be refactored to

protected void DetailsGrid_ColumnSorted(object sender, Infragistics.Web.UI.GridControls.SortingEventArgs e) {
    var dataSource = SortingField.Value;
    var result = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Details>>(dataSource);
    DetailsGrid.DataSource = result;
    DetailsGrid.DataBind();
}
Comments