Have a Json data in a variable and want to display that data in Tabular form in asp.net

Question

I want to convert this into tabular format using ASP.NET

responsebody= [{
        "name": "apple.com",
        "status": "regthroughothers",
        "classkey": "domcno"
    },
    {
        "name": "asdfgqwx.com",
        "status": "available",
        "classkey": "domcno"
    },
    {
        "name": "microsoft.org",
        "status": "unknown",
        "classkey": ""
    },
    {
        "name": "apple.org",
        "status": "unknown",
        "classkey": ""
    },
    {
        "name": "microsoft.com",
        "status": "regthroughothers",
        "classkey": "domcno"
    },
    {
        "name": "asdfgqwx.org",
        "status": "unknown",
        "classkey": "domcno"
    }]

Answer 1

I guess the answer depends on whether you are using ASP.NET MVC or WebForms, build-in types or 3rd party libraries.

Here is an example for MVC.

1. Your Controller Action would look similar to:

public ActionResult DisplayJsonData()
        {
            var json = @"{
                'items' : [{
                        'name': 'apple.com',
                        'status': 'regthroughothers',
                        'classkey': 'domcno'
                    },
                    {
                        'name': 'asdfgqwx.com',
                        'status': 'available',
                        'classkey': 'domcno'
                    },
                    {
                        'name': 'microsoft.org',
                        'status': 'unknown',
                        'classkey': ''
                    },
                    {
                        'name': 'apple.org',
                        'status': 'unknown',
                        'classkey': ''
                    },
                    {
                        'name': 'microsoft.com',
                        'status': 'regthroughothers',
                        'classkey': 'domcno'
                    },
                    {
                        'name': 'asdfgqwx.org',
                        'status': 'unknown',
                        'classkey': 'domcno'
                    }
                ]
            }"; 

            var model = JsonConvert.DeserializeObject<DisplayJsonModel>(json);
            return View(model);
        }

And DisplayJsonData.cshtml view:

@model WebApplication2.Models.DisplayJsonModel
@{
    ViewBag.Title = "DisplayJsonData";
}

<h2>DisplayJsonData</h2>

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Class Key</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Items)
        {
            <tr>
                <td>@item.name</td>
                <td>@item.status</td>
                <td>@item.classkey</td>
            </tr>
        }
    </tbody>
</table>

3. As suggested above you would need to parse JSON as well.

   public class DisplayJsonModel { public JsonItem[] Items { get; set; } }

   public class JsonItem
   {
       public string name { get; set; }
       public string status { get; set; }
       public string classkey { get; set; }
   }
   

---

And here is pure JS:

<table class="table">
    <thead>
    <tr>
        <th>Name</th>
        <th>Status</th>
        <th>Class Key</th>
    </tr>
    </thead>
    <tbody id="jsTableBody"></tbody>
</table>

<script>
    var responsebody = [
        {
            "name": "apple.com",
            "status": "regthroughothers",
            "classkey": "domcno"
        },
        {
            "name": "asdfgqwx.com",
            "status": "available",
            "classkey": "domcno"
        },
        {
            "name": "microsoft.org",
            "status": "unknown",
            "classkey": ""
        },
        {
            "name": "apple.org",
            "status": "unknown",
            "classkey": ""
        },
        {
            "name": "microsoft.com",
            "status": "regthroughothers",
            "classkey": "domcno"
        },
        {
            "name": "asdfgqwx.org",
            "status": "unknown",
            "classkey": "domcno"
        }
    ];

    var tableRows = [];
    for (var i = 0; i < responsebody.length; i++) {
        tableRows.push("<tr>" +
            "<td>" + responsebody[i].name + "</td>" + 
            "<td>" + responsebody[i].status + "</td>" + 
            "<td>" + responsebody[i].classkey + "</td>" + 
            "</tr>");
    }
    var tableBody = document.getElementById("jsTableBody");
    tableBody.innerHTML = tableRows.join('');
</script>

---

And for Web Forms You might want to look into using something like asp:DataGrid in aspx page:

<asp:DataGrid runat="server" ID="grid" AutoGenerateColumns="False" CssClass="table table-bordered">
<Columns>
  <asp:BoundColumn DataField="name" HeaderText="Name" />
  <asp:BoundColumn DataField="status" HeaderText="Status" />
  <asp:BoundColumn DataField="classkey" HeaderText="Class Key" />
</Columns>
</asp:DataGrid>

And in code-behind:

var model = JsonConvert.DeserializeObject<DisplayJsonModel>(json);
grid.DataSource = model.Items;
grid.DataBind();

Answer 2

In Visual Studio

Step 1: Copy your JSON to clipboard by right-click or (CtrC + C):

[{
        "name": "apple.com",
        "status": "regthroughothers",
        "classkey": "domcno"
    },
    {
        "name": "asdfgqwx.com",
        "status": "available",
        "classkey": "domcno"
    },
    {
        "name": "microsoft.org",
        "status": "unknown",
        "classkey": ""
    },
    {
        "name": "apple.org",
        "status": "unknown",
        "classkey": ""
    },
    {
        "name": "microsoft.com",
        "status": "regthroughothers",
        "classkey": "domcno"
    },
    {
        "name": "asdfgqwx.org",
        "status": "unknown",
        "classkey": "domcno"
    }]

Step 2: Put your pointer into the position you want to write that.

Select Edit >> Paste Special >> Paste JSON as Classes

Result:

    public class Rootobject
    {
        public Class1[] Property1 { get; set; }
    }

    public class Class1
    {
        public string name { get; set; }
        public string status { get; set; }
        public string classkey { get; set; }
    }

Step3: You can change something with the result you want. Then, Using JsonConvert.DeserializeObject<Foo>(yourString) to do the work.

Answer 3

You'll need the Newtonsoft.JsonConvert NuGet package to convert your JSON to a C#-compatible type. Right-click on your project in the Solution Explorer and then click "Manage NuGet Packages", then search for and install it.

You'll also need to create a new class to store the data in the correct format. Right-click on your project, hover on "Add", click on "Class". Assuming all your data is string format:

public class Data
    {
        public string name { get; set; }
        public string status { get; set; }
        public string classkey { get; set; }
    }

Back to wherever your JSON variable is, add using Newtonsoft.Json;, then use code like below:

List<Data> deserializedData = JsonConvert.DeserializeObject<List<Data>>(your variable name here);

This will get your data in a List of type Data. From there you can insert it into a SQLite database or do whatever, but you'll need to make your question more specific on what you mean by "tabular".