Parsing JSON data on the client side in an ASP.NET application

Question

Parsing JSON data on the client side in an ASP.NET application

I am currently working with JSON data that looks like this:

 "Table":[
 {
 "AF":2000.00
 "RegionNumber":1
 "RegionName":"Black Sea"
 },
 {
 "AF":100.00
 "RegionNumber":1
 "RegionName":"Black Sea"
 },
 {
 "AF":15000.00
 "RegionNumber":2
 "RegionName":"Istanbul"
 },
 {
 "AF":31000.00
 "RegionNumber":1
 "RegionName":"Black Sea"
 },
 {
 "AF":11000.00
 "RegionNumber":2
 "RegionName":"Istanbul"
 }
 ]

My goal is to reorganize the data using JavaScript into the following format:

series: [{
    name: 'Black Sea',
    data: [2000, 100, 31000],
    stack: 'Bookings'
}, {
    name: 'Istanbul',
    data: [15000,11000,0],
    stack: 'Bookings'
}]

Does anyone have suggestions on how I can achieve this transformation?

javascript json

Answer 1

Answer №1

This code snippet comes close to meeting your requirements and leverages Ramda.js as well

const dataset =  {
    Table: [
        {
            AF: 2000,
            RegionName: "Black Sea",
            RegionNumber: 1
        },
        {
            AF: 100,
            RegionName: "Black Sea",
            RegionNumber: 1
        },
        {
            AF: 15000,
            RegionName: "Istanbul",
            RegionNumber: 2
        },
        {
            AF: 31000,
            RegionName: "Black Sea",
            RegionNumber: 1
        },
        {
            AF: 11000,
            RegionName: "Istanbul",
            RegionNumber: 2
        }
    ]
}

const transformTableData =
  R.pipe(
    R.groupBy(R.prop("RegionName")),
    R.map(R.pluck("AF")),
    R.toPairs,
    R.map(R.zipObj(["name", "data"])) 
  )

const transformData = (dataset) => ({
  series: transformTableData(dataset.Table)
})

console.log(transformData(dataset))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 2

This code snippet comes close to meeting your requirements and leverages Ramda.js as well

const dataset =  {
    Table: [
        {
            AF: 2000,
            RegionName: "Black Sea",
            RegionNumber: 1
        },
        {
            AF: 100,
            RegionName: "Black Sea",
            RegionNumber: 1
        },
        {
            AF: 15000,
            RegionName: "Istanbul",
            RegionNumber: 2
        },
        {
            AF: 31000,
            RegionName: "Black Sea",
            RegionNumber: 1
        },
        {
            AF: 11000,
            RegionName: "Istanbul",
            RegionNumber: 2
        }
    ]
}

const transformTableData =
  R.pipe(
    R.groupBy(R.prop("RegionName")),
    R.map(R.pluck("AF")),
    R.toPairs,
    R.map(R.zipObj(["name", "data"])) 
  )

const transformData = (dataset) => ({
  series: transformTableData(dataset.Table)
})

console.log(transformData(dataset))

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

Answer 3

Answer №2

If you're coding in pure JavaScript:

 let storage = {}
 for (let key in data) {
     let entry = data[key];
     if (storage[entry.Information] !== undefined) storage[entry.Information].content.push(entry.Value);
     else storage[entry.Information] = {
         type: entry.Information,
         content: [entry.Value],
         category: 'Books'
     }
 }

 let outcome = {
     types: []
 };

 for (let key in storage) {
     outcome.types.push(storage[key]);
 }

 console.log(outcome);

Answer 4

If you're coding in pure JavaScript:

 let storage = {}
 for (let key in data) {
     let entry = data[key];
     if (storage[entry.Information] !== undefined) storage[entry.Information].content.push(entry.Value);
     else storage[entry.Information] = {
         type: entry.Information,
         content: [entry.Value],
         category: 'Books'
     }
 }

 let outcome = {
     types: []
 };

 for (let key in storage) {
     outcome.types.push(storage[key]);
 }

 console.log(outcome);

Answer 5

Answer №3

When working with web methods, I've successfully passed arrays of custom objects into List without any issues.

If you're encountering JSON formatting problems due to quotes around property names, try updating your object like this:

var scoresList = [{TraitID:1, TraitScore:2}, {TraitID:2, TraitScore:5}];

Then, adjust your data line to look like this:

data: JSON.stringify({ scores : scoresList }),

I hope this suggestion resolves your issue...

UPDATE: Here's a functioning example...

<script type="text/javascript">
$(function () {

    var scoresList = [{ TraitID: 1, TraitScore: 2 }, { TraitID: 2, TraitScore: 5}];

    $.ajax({ type: "POST",
        url: "Tryouts.aspx/Test",
        data: JSON.stringify({ scores: scoresList }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            if (response.d == true) {
                alert("success!!!!!");
            } else {
                alert("problem!!!!!!!!!");
            }
        },
        error: function (xhr) {
            alert("ERROR");
        }
    });

});
</script>

Below is the codebehind snippet :

public class Score
{    // default constructor    
    public Score() { }
    public int TraitID { get; set; }
    public double TraitScore { get; set; }
}

[WebMethod]
public static bool Test(List<Score> scores)
{
    return true;
}

Answer 6

When working with web methods, I've successfully passed arrays of custom objects into List without any issues.

If you're encountering JSON formatting problems due to quotes around property names, try updating your object like this:

var scoresList = [{TraitID:1, TraitScore:2}, {TraitID:2, TraitScore:5}];

Then, adjust your data line to look like this:

data: JSON.stringify({ scores : scoresList }),

I hope this suggestion resolves your issue...

UPDATE: Here's a functioning example...

<script type="text/javascript">
$(function () {

    var scoresList = [{ TraitID: 1, TraitScore: 2 }, { TraitID: 2, TraitScore: 5}];

    $.ajax({ type: "POST",
        url: "Tryouts.aspx/Test",
        data: JSON.stringify({ scores: scoresList }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            if (response.d == true) {
                alert("success!!!!!");
            } else {
                alert("problem!!!!!!!!!");
            }
        },
        error: function (xhr) {
            alert("ERROR");
        }
    });

});
</script>

Below is the codebehind snippet :

public class Score
{    // default constructor    
    public Score() { }
    public int TraitID { get; set; }
    public double TraitScore { get; set; }
}

[WebMethod]
public static bool Test(List<Score> scores)
{
    return true;
}

Parsing JSON data on the client side in an ASP.NET application

Answer №1

Answer №2

Answer №3

Similar questions

Can you offer advice on creating jasmine tests for an Angular controller and service similar to this?

In Javascript, what significance does the symbol ":" hold?

Error encountered in MVC 5: When using jQuery to assign a value to an object, the

The issue with Node module @kenjiuno/msgreader is that it is unable to find the constructor for MsgReader

Flutter: Iterating Through JSON Data

trigger the focusout event within the focusin event

Background image fixed with scrolling effect

I am experiencing some difficulty with the GetServerDate using the JSON protocol in JQuery; it's

jQuery automatic slider for seamless transitions

Issue with showing an input field following the button click

Enhance jQuery dataTable with live updates from Firestore querySnapshot

The event for 'deviceready' in Cordova is not getting triggered when placed inside the angular .run block

The datatables button triggers an event twice

Decoding whole numbers using JsonCpp

Converting a pandas column into a list for a JSON file transformation

Developing a new React application with Access Control List (ACL) and encountering an issue with Casl

The TextView is not displaying the Android Json data retrieved from mysqli

Animating a mesh in three.js with color transitioning using tween.js

What could be causing the error message to appear stating that each list item must have a unique key when utilizing react-bootstrap in Nextjs?

What is the best method for converting an Object with 4 properties to an Object with only 3 properties?