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

Mapping data visually

Using the jq command, you can easily append data to an array at a specific index

Having trouble deciding between JSON, XML, or using a database?

Angular2 Service Failing to Return Expected Value

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

When running `grunt serve: dist`, an error is thrown stating: "Unknown provider: utilProvider <- util <- NavbarController"

Steps to modify the servletRequest's content length within a filter

Intermittently play a series of sound files, with only the final sound ringing out

Tips for transferring POST body data to a different route without losing any information

Extract CSS from Chrome developer tools and convert it into a JavaScript object

Dealing with a frustrating roadblock in Three.js where you encounter an "Unknown format" error while trying to work with

Each sub-array must be assigned a unique parent array name in the JSON structure

Display the name of the file on the screen

Exploring the differences in performance between React hooks and React classes

Utilizing variable query operators solely in instances where they hold value

Issues with JQuery .attr method not functioning as expected

The Next Js API is experiencing difficulties resolving

Reading Json file and sending the value using the Dashing Meter

Exploring the integration of Stripe Checkout with React and Express.js

What could be causing the version error when running 'pip install json'?