Click here to Skip to main content
15,878,430 members
Please Sign up or sign in to vote.
1.80/5 (2 votes)
C#
<string xmlns="http://tempuri.org/">
{"traffic":[{"domain":{"name":"abcabanderadas.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":507,"availability":"3/26/2016"}},{"domain":{"name":"abcbidders.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":764,"availability":"3/24/2016"}},{"domain":{"name":"abcd4web.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":539,"availability":"3/27/2016"}},{"domain":{"name":"abcdadieta.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":1113,"availability":"3/27/2016"}},{"domain":{"name":"abcdatacodigos.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":531,"availability":"3/27/2016"}},{"domain":{"name":"abcdbrageac.com","inboundLinks":0,"thirtyDayScore":9.3,"dnsTrafficReach":122,"availability":"3/23/2016"}},{"domain":{"name":"abcdefghijklmn-opqrstuvwsyz.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":503,"availability":"3/24/2016"}},{"domain":{"name":"abcdeliverysystems.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":330,"availability":"3/27/2016"}},{"domain":{"name":"abcdenverchannel.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":570,"availability":"3/27/2016"}},{"domain":{"name":"abcdishylicious.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":422,"availability":"3/24/2016"}},{"domain":{"name":"abcdomainhost.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":1040,"availability":"3/26/2016"}},{"domain":{"name":"abcdonate.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":558,"availability":"3/23/2016"}},{"domain":{"name":"abcdoorcolorado.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":476,"availability":"3/26/2016"}},{"domain":{"name":"abcdwin.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":448,"availability":"3/27/2016"}},{"domain":{"name":"abcdyi.com","inboundLinks":0,"thirtyDayScore":9.3,"dnsTrafficReach":400,"availability":"3/24/2016"}},{"domain":{"name":"abckidsacdemy.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":565,"availability":"3/25/2016"}},{"domain":{"name":"abcmobiledesign.net","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":481,"availability":"3/26/2016"}},{"domain":{"name":"abcsitedesign.com","inboundLinks":19,"thirtyDayScore":9.5,"dnsTrafficReach":14016,"availability":"3/23/2016"}},{"domain":{"name":"guarderiaabc.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":0,"availability":"3/27/2016"}},{"domain":{"name":"insideabc.com","inboundLinks":0,"thirtyDayScore":9.3,"dnsTrafficReach":730,"availability":"3/24/2016"}},{"domain":{"name":"prodecabcn.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":436,"availability":"3/27/2016"}}]}
</string>




this is the json response what i am getting from service

What I have tried:

I am getting the data but i am unable to display it in the html table.
Posted
Updated 6-Apr-16 11:51am
Comments
ZurdoDev 24-Mar-16 8:05am    
Why can't you display it in an html table?
F-ES Sitecore 24-Mar-16 8:08am    
google "jquery create table from json" and you'll probably find examples.

Hello, Here is what I have done. I hope it helps

HTML
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Handling JSON Data demo</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <!--script src="js/jquery-1.10.2.min.js"></script-->
   <script>
	$(document).ready(function(){
		var xml = '<string xmlns="http://tempuri.org/">[{"traffic":[{"domain":{"name":"abcabanderadas.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":507,"availability":"3/26/2016"}},{"domain":{"name":"abcbidders.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":764,"availability":"3/24/2016"}},{"domain":{"name":"abcd4web.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":539,"availability":"3/27/2016"}},{"domain":{"name":"abcdadieta.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":1113,"availability":"3/27/2016"}},{"domain":{"name":"abcdatacodigos.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":531,"availability":"3/27/2016"}},{"domain":{"name":"abcdbrageac.com","inboundLinks":0,"thirtyDayScore":9.3,"dnsTrafficReach":122,"availability":"3/23/2016"}},{"domain":{"name":"abcdefghijklmn-opqrstuvwsyz.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":503,"availability":"3/24/2016"}},{"domain":{"name":"abcdeliverysystems.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":330,"availability":"3/27/2016"}},{"domain":{"name":"abcdenverchannel.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":570,"availability":"3/27/2016"}},{"domain":{"name":"abcdishylicious.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":422,"availability":"3/24/2016"}},{"domain":{"name":"abcdomainhost.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":1040,"availability":"3/26/2016"}},{"domain":{"name":"abcdonate.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":558,"availability":"3/23/2016"}},{"domain":{"name":"abcdoorcolorado.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":476,"availability":"3/26/2016"}},{"domain":{"name":"abcdwin.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":448,"availability":"3/27/2016"}},{"domain":{"name":"abcdyi.com","inboundLinks":0,"thirtyDayScore":9.3,"dnsTrafficReach":400,"availability":"3/24/2016"}},{"domain":{"name":"abckidsacdemy.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":565,"availability":"3/25/2016"}},{"domain":{"name":"abcmobiledesign.net","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":481,"availability":"3/26/2016"}},{"domain":{"name":"abcsitedesign.com","inboundLinks":19,"thirtyDayScore":9.5,"dnsTrafficReach":14016,"availability":"3/23/2016"}},{"domain":{"name":"guarderiaabc.com","inboundLinks":0,"thirtyDayScore":9.4,"dnsTrafficReach":0,"availability":"3/27/2016"}},{"domain":{"name":"insideabc.com","inboundLinks":0,"thirtyDayScore":9.3,"dnsTrafficReach":730,"availability":"3/24/2016"}},{"domain":{"name":"prodecabcn.com","inboundLinks":0,"thirtyDayScore":9.5,"dnsTrafficReach":436,"availability":"3/27/2016"}}]}]</string>',
		xmlDoc = $.parseXML( xml ),
		$xml = $( xmlDoc ),
		$string = $xml.find( "string" ).text();
		$traffics=$.parseJSON($string);
		drawTable($traffics[0].traffic)
		function drawTable(domains){
			for(var i=0;i<domains.length;i++){
				drawRow(domains[i]);
			}
		}
		function drawRow(rowData){
			var row= $("<tr />")
			$("#domainDataTable").append(row);
			row.append($("<td>"+rowData.domain.availability+"</td>"));
			row.append($("<td>"+rowData.domain.dnsTrafficReach+"</td>"));
			row.append($("<td>"+rowData.domain.inboundLinks+"</td>"));
			row.append($("<td>"+rowData.domain.name+"</td>"));
			row.append($("<td>"+rowData.domain.thirtyDayScore+"</td>"));
			
		}
	});
   </script>
</head>
<body>
<div class="table-responsive">
<table id="domainDataTable" class="table">
	<tr>
		<th>Availability</th>
		<th>Dns Traffic Reach</th>
		<th>Inbound Links</th>
		<th>Name</th>
		<th>Thirty Day Score</th>
	</tr>
</table>
</div> 
</body>
</html>
 
Share this answer
 
v2
Step One

Generally WebService return xml format, in order to generate JSON format, you need to convert data table to JSON which could be done by JsonConvert method from Newtonsoft.Json package which is downloadable via nuget and following link.

https://www.nuget.org/packages/Newtonsoft.Json/8.0.3[^]

Fill dt with your data and convert to json.

C#
using Newtonsoft.Json // Must be added

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
    public void GetData()
    {
        DataTable dt = new DataTable(); // DataTable 
        string jsonString = string.Empty;
        jsonString = JsonConvert.SerializeObject(dt ); 
        Context.Response.Clear();
        Context.Response.ContentType = "application/json";
        Context.Response.Flush();
        Context.Response.Write(jsonString);
    }
}
}

Step Two

In order to read JSON format from web service by Ajax, you can use following code.
HTML
<table id="domainDataTable" class="table">
    <tr>
        <th>Availability</th>
        <th>Dns Traffic Reach</th>
        <th>Inbound Links</th>
        <th>Name</th>
        <th>Thirty Day Score</th>
    </tr>
</table>



<script>

    $.getJSON("webservice.asmx", function (domains) {

        for (var i = 0; i < domains.length; i++) {
            drawRow(domains[i]);
        }
    });

    function drawRow(rowData) {
        var row = $("<table><tbody><tr /></tbody></table>")
        $("#domainDataTable").append(row);
        row.append($("<table><tbody><tr><td>" + rowData.domain.availability + "</td></tr></tbody></table>"));
        row.append($("<table><tbody><tr><td>" + rowData.domain.dnsTrafficReach + "</td></tr></tbody></table>"));
        row.append($("<table><tbody><tr><td>" + rowData.domain.inboundLinks + "</td></tr></tbody></table>"));
        row.append($("<table><tbody><tr><td>" + rowData.domain.name + "</td></tr></tbody></table>"));
        row.append($("<table><tbody><tr><td>" + rowData.domain.thirtyDayScore + "</td></tr></tbody></table>"));
    }
        </script>
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900