how to bind json webservice data to html Table using javascript

Question

User2038048451 posted

HI,

I am using a webservice which return data as Json format, i want to bind the json data to a HTMLtale using javascript.

Json Webservice Output :-

[{"Address_Line_1":"331 Bangalore","Address_Line_2":"","Address_Line_3":"","Address_Line_4":"","AlternateAddresses":[],"City":"Bangalore","Country":"India","Distance":"0","FormattedAddress":"3s1 Bangalore, Bangalore, Bangalore 66","GeoCode":"POINT (-34.134345334349056 20.3254345354” }]

so how to bind the above json output to html table using javascript. and how to call this Json webservice in javascript how to handel output and how to bind to html data , a sample will be very helpful.

Answer 1

User1256627138 posted

Hi,

            You could try as given below

<table id="Table1" width="100%" border="0">
</table>

$(document).ready(function () {
var myJSONObject = jQuery.parseJSON('[{"Address_Line_1":"331 Bangalore","Address_Line_2":"","Address_Line_3":"","Address_Line_4":"","AlternateAddresses":[],"City":"Bangalore","Country":"India","Distance":"0","FormattedAddress":"3s1 Bangalore, Bangalore, Bangalore 66","GeoCode":"POINT (-34.134345334349056 20.3254345354)" }]');
            for (var i = 0; i < myJSONObject.length; i++) {
                $("<tr />")
             .append($("<td />").text(myJSONObject[i]["Address_Line_1"]))
             .append($("<td />").text(myJSONObject[i]["Address_Line_2"]))
             .append($("<td />").text(myJSONObject[i]["Address_Line_3"]))
             .append($("<td />").text(myJSONObject[i]["City"]))
             .append($("<td />").text(myJSONObject[i]["Country"]))
             .append($("<td />").text(myJSONObject[i]["Country"]))
             .append($("<td />").text(myJSONObject[i]["GeoCode"]))
             .appendTo("#Table1");
            }

        });

 

Answer 2

User2038048451 posted

Thanks for reply ramanselva,

i have a webserive which gives output as json below is the code:-

my webserive url :-

sURI= "https://test.am.test.com/apps/TestService/Service/NRK/Properties/DataAsJson?src=46&
city= "&ctName & " &st= " & stName & " &cn="&ctrName&"&zip=&ret="

in javascript :-

function SendRequest(sURI) {
       WebService(sURI);

    }

    function CallWebService(sURI) {
        $.ajax({
            type: "POST",
            url: sURI,
            dataType: "json",
            contentType: "application/json",
            success: OnSuccess,
            error: OnFailed
        });

    }
function OnSuccess() {
         alert("sucess");
}
function OnFailed() {
           alert("error");

}

 

but it is going to onfaied event any idea ?

 

Answer 3

User1256627138 posted

Hi,

        For cross domain request tyou can try dataType: 'jsonp' as given in this example,

http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain

Answer 4

User-1662538993 posted

Try -

contentType: 
"application/json",

"application/json; charset=utf-8",