display data from .json file to tabular form in ASP.NET page

Question

0.00/5 (No votes)

See more:

SQL

I've to show the data in a table importing the data from a JSON file. I can not proceed further with this. Since I am new to asp.net, do not how to display the imported data in a table in ASP.NET.

JavaScript

//// json file
{"employees":[
    {"firstName":"Anna","lastName":"Meyers"},
    {"firstName":"Betty","lastName":"Layers"},
    {"firstName":"Carl","lastName":"Louis"},
]}

ASP.NET

<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="ReadDataJSON.About" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
  
            $("#Result").click(function() {
                $.ajax({
                    type: "GET",
                    url: "C:\Users\NISCHALINN\Documents\test.json",
                    beforeSend: function() {
                        $.blockUI({
                            fadeIn : 0,
                            fadeOut : 0,
                            showOverlay : false
                        });
                    },
                    dataType: "json",
			
                    success: function(data)
                    {
                        alert(data);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
                    },
                    complete: function ()
                    {
                        $.unblockUI();
                    }
            });
        });
        });
 </script>


    <h2><%: Title %>.</h2>
    <h3>Your application description page.</h3>
    <h4>JSON Object Creation in JavaScript</h4>


    <p>Use this area to provide additional information.</p>

     
    <div>
        <% ------- display the JSON data in tabular format ------ %>
    </div>
   
</asp:Content>

The output format is:

FirstName 	LastName
------------------
Anna		Meyers
Betty		Layers
Carl		Louis
------------------

How can I do this? Please help me I am new to ASP.NET.

Regards!

Posted 10-Feb-15 22:52pm

nischalinn

Updated 22-Jul-19 17:44pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Answer 1 · 2015-02-11T00:12:00

Try this out and adapt:

XML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

// json String
var text = '{"employees":[' +
'{"firstName":"Anna","lastName":"Meyers" },' +
'{"firstName":"Betty","lastName":"Layers" },' +
'{"firstName":"Carl","lastName":"Louis" }]}';

// data returned as jsonObject
data = JSON.parse(text);

$.each(data.employees, function () {
        $("#table1").append("<tr><td>"+this.firstName+"</td><td>"+this.lastName  + "</td></tr>");
      });

});
</script>
</head>
<body>
<div>
<table id='table1' border="1">
</table>
</div>
</body>
</html>

sandeshjkota · Answer 2 · 2015-02-11T00:59:00

All you have to do is pass the data into the below function

JavaScript

function BuildTable(data) {
   // Parse only if its needed
   var jo = $.parseJSON(data);
   for (i = 0; i < jo.employees.length; i++) {
     var emp = jo.employees[i];
     var row = "<table><tbody><tr><td>" + emp.firstName +"</td><td>"+ emp.lastName+"</td></tr></tbody></table>";
     $('#resultTable').append(row);
   }
}

And change your HTML as below.

HTML

<div>
   <table id="resultTable">
       <tr>
          <th>FirstName</th>
          <th>LastName</th>
       </tr>
   </table>
</div>

Or you can also create the above HTML (headers) dynamically

display data from .json file to tabular form in ASP.NET page

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0