-1

i have some Json data and i want to show on Razor view, Please suggest me here is my Json data Json Data:

[{"Name":"H&S 01","1":65656.0,"2":67779.0,"3":32323.0,"4":232323.0,"5":34.0,"6":345.0,"7":34.0,"8":23.0,"9":0.0,"10":0.0,"11":0.0,"12":0.0},{"Name":"H&S 02","1":2342.0,"2":234.0,"3":234.0,"4":23.0,"5":234.0,"6":23423.0,"7":23423.0,"8":4343.0,"9":23658.0,"10":667.0,"11":366.0,"12":34766.0},{"Name":"H&S 03","1":0.0,"2":333.0,"3":0.0,"4":0.0,"5":0.0,"6":0.0,"7":0.0,"8":0.0,"9":0.0,"10":0.0,"11":0.0,"12":0.0}]

disply 1

Second Images Output 2

and i want to display on view be like.

Name| Jan- 2008 | Feb- 2008 | Mar - 2008| Total
H&S1| 65656     | 23        |  34       | 65727     
H&S2| 23333     | 4300      | 2150      | 27570
Aliyange553
  • 9
  • 2

1 Answers1

0

What you can try is First, Translate

From 

[
  {
    "1": 65656,
    "2": 67779,
    "3": 32323,
    "4": 232323,
    "5": 34,
    "6": 345,
    "7": 34,
    "8": 23,
    "9": 0,
    "10": 0,
    "11": 0,
    "12": 0,
    "Name": "H&S 01"
  }
]

To something like:

[
  {
    "Jan- 2008": 65656,
    "Feb- 2008": 67779,
    "Mar- 2008": 32323,
    "Apr- 2008": 232323,
    "May- 2008": 34,
    "Jun": 345,
    "Jul": 34,
    "Aug": 23,
    "Sep": 0,
    "Oct": 0,
    "Nov": 0,
    "Dec": 0,
    "Name": "H&S 01"
  }
]

You can do this using JSON serializers like https://www.newtonsoft.com/json.

Have a look at this on how you can iterate on your properties

Next, you can use a library to display the JSON as a table and then just customize the table with CSS

Here's one I found. https://github.com/jongha/jquery-jsontotable

If you want to try out how JSON to table works, have a go here

Philip Badilla
  • 11
  • 3