Transforming a JSON object into a list in C#

Question

Transforming a JSON object into a list in C#

After exploring similar posts without success, I am reaching out here for help.

I have a Json data stored in a hidden field that I am trying to access in the code behind file of my markup page. My goal is to convert this Json into a List and bind it to a grid. However, when I try to deserialize it, I encounter an error stating "Unexpected error encountered while parsing values ''"

Below is the script used to retrieve data from the grid and create 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 definition:

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 snippet for deserializing 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 obtained is shown below:

"[{"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}]"

javascript c#json

Answer 1

Answer №1

initialize a list as an array and populate it with JavaScript objects, then use JSON.stringify to convert it to JSON format

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);
}

A more concise way to deserialize the JSON and retrieve data in a list of the model class is shown below

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();
}

Following @Andreas' suggestion, the UPDATE function should yield the same output.

function UpdateDataSource() {        
    var grid = $find("DetailsGrid");
    var rows = grid.get_rows();
    var list = rows.map(function(row) {
        return {
            Name: row.get_cellByColumnKey("Name").get_value(),
            Country: row.get_cellByColumnKey("Country").get_value(),
            Gender: row.get_cellByColumnKey("Gender").get_value(),
            Age: row.get_cellByColumnKey("Age").get_value(),
            UniqueKey: row.get_cellByColumnKey("UniqueKey").get_value()
        };
    });
    return JSON.stringify(list);
}

Answer 2

initialize a list as an array and populate it with JavaScript objects, then use JSON.stringify to convert it to JSON format

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);
}

A more concise way to deserialize the JSON and retrieve data in a list of the model class is shown below

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();
}

Following @Andreas' suggestion, the UPDATE function should yield the same output.

function UpdateDataSource() {        
    var grid = $find("DetailsGrid");
    var rows = grid.get_rows();
    var list = rows.map(function(row) {
        return {
            Name: row.get_cellByColumnKey("Name").get_value(),
            Country: row.get_cellByColumnKey("Country").get_value(),
            Gender: row.get_cellByColumnKey("Gender").get_value(),
            Age: row.get_cellByColumnKey("Age").get_value(),
            UniqueKey: row.get_cellByColumnKey("UniqueKey").get_value()
        };
    });
    return JSON.stringify(list);
}

Answer 3

Answer №2

This solution looks like it should work

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

Answer 4

This solution looks like it should work

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

Transforming a JSON object into a list in C#

Answer №1

Answer №2

Similar questions

Creating a personalized context menu in Javascript: The ultimate guide to incorporating copy and paste features

Encountering a Blank Area at the Top of a Printed AngularJS Screen

How can I loop through this MongoDB JSON data in a Pug template?

"Trouble arises with the match() function in relation to email regex validation

Utilize JSON data to dynamically populate TextFields or Select menus depending on a specific key in the JSON object

Utilize Bootstrap4 to position content above the navigation icon

Discovering the power of ng-change in an Angular typeahead search functionality

difficulty receiving the information promptly via an AJAX request (utilizing AJAX and the 'for' loop)

Is AngularJS not able to effectively manage the button type "reset"?

Eliminate the need for background video buffering

What methods can be used to secure Next.js API routes and prevent them from being directly accessed through the URL

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

Retrieving blog posts formatted in markdown from a centralized JSON file

The JavaScript function I created to remove the last item in an array is not functioning correctly when it encounters an "else

What is the best way to display a JSON array in Angular 4?

Is there a way to load all movies in advance when none of the tags are selected?

Update or overwhelm a node_module file reference

Encountering an 'undefined' property error when clicking a button in Angular 1.x

What is the best method for constructing an array of sets using Raphael?

Error: Unable to access the 'rotation' property of an undefined object in the animate function on line 266 of index.html, at line 287 of index.html