Unable to retrieve JSON data from url in html page using javascript

Question

I have created a sample WCF service for retrieving data from database and display it as JSON data in browser.This task was completed successfully.

The JSON data received by the url is:

{"shipmentDetails":[{"Name":"AAA","Number":"123"},{"Name":"BBB","Number":"321"}]}

After creating the above service my task is to view the same data in html page when a button is clicked. I am using javascript/jQuery for receiving the data from the URL, but when I clicked the button no action was performed.

Following is the HTML with javascript:

<html>
<head>
<title>JSON</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com /jquery-1.5.min.js">
</script>

 <script language="javascript" type="text/javascript" >
 $(document).ready(function(){
     $("testButton").click(function() {
        $.ajax({
           type: "GET",
           dataType: 'jsonp',
           contentType: "application/jsonp; charset=utf-8",
           url: "http://localhost:4148/EIS.svc/getShipment/arun/arun",
           success: function (data) {
               obj = eval('(' + data + ')');
               alert(obj);
               var innerHtml = "";
               document.getElementById('test').innerHTML=obj;
                      //'test' is ID of <label1>
               document.getElementById('testlab').innerHTML=obj.shipmentDetails[0].Name;
                     //'testlab' is ID of <label2>
               $("#test").html(innerHtml);
               alert("JSON DATA");
               alert(obj.shipmentDetails[0].Number);
               },
               error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert("Error while retrieval – " + XMLHttpRequest.responseText+":"+textStatus+":"+errorThrown);

                }

             });
         });
      });


</head>
<body>
<input type="button" id="testButton" value="GET JSON"/>
<label id="test"></label>
<label id="testlab"></label>
</body>
</html>

Bellash · Accepted Answer · 2014-04-10 10:06:08Z

2

Have a look your url is a string instead of the variable name!

 type: 'GET',
url: serviceURL /* instead of 'serviceURL'*/,

here is the complete code

  $('#testButton').click(function() {
          //'testButton' is ID of button input type in html
    alert("Button clicked");
        var serviceURL="http://localhost:4148/EIS.svc/getShipment/json/data";
     $.ajax({
         type: 'GET',
     url: serviceURL,
     data:$('#serviceURL').serialize(),
     processData: false,
     dataType: 'jsonp',
     contentType: "application/jsonp; charset=utf-8",
     //If the call succeeds
     success:function (data) {
         alert(data);
     },

     //If the call fails

     error: function (XMLHttpRequest, textStatus, errorThrown) {

     alert("Error while retrieval – " +         XMLHttpRequest.responseText+":"+textStatus+":"+errorThrown);

     }

     });
        return false;
     });

answered Apr 10, 2014 at 10:06

Bellash

8,2576 gold badges57 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arun Over a year ago

still the same.. no action performed.

Bellash Over a year ago

please check if you call jQuery and if the button which id is testButton exists and is unique, Mabye you'd paste your complete html

Arun Over a year ago

Arun · Accepted Answer · 2014-04-28 09:05:52Z

For using the JSON data that is returned from an URL, it has to be wrapped in a callback function as follows:

URL before wrapping the data is:

[http://localhost:4148/EIS.svc/getShipment/json/data]

URL after wrapping the data in a callback function is:

[http://localhost:4148/EIS.svc/getShipment/json/data?callback=jsonpexp]

After making the above changes in the URL the returned data in the browser look like as follows:

jsonpexp({"shipmentDetails":[{"Name":"AAA","Number":"123"},{"Name":"BBB","Number":"321"}]});

Then it requires to make changes in the javascript as like the following:

  $('#testButton').click(function() {
          //'testButton' is ID of button input type in html
       $.ajax({
       type: "GET",
       dataType: 'jsonp',
       contentType: "application/jsonp; charset=utf-8",
       url: "http://localhost:4148/EIS.svc/getShipment/arun/arun?callback=jsonpexp",
       jsonpCallback: 'jsonpexp',
       success: function (data) {

           var innerHtml = "";
           document.getElementById('test').innerHTML=data.shipmentDetails[0].Name;;
                  //'test' is ID of <label1>
           document.getElementById('testlab').innerHTML=data.shipmentDetails[0].Number;
                 //'testlab' is ID of <label2>
           document.getElementById('test2').innerHTML=data.shipmentDetails[1].Name;;
           //'test2' is ID of <label3>
             document.getElementById('testlab2').innerHTML=data.shipmentDetails[1].Number;
          //'testlab2' is ID of <label4>           
           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {

            alert("Error while retrieval – " + XMLHttpRequest.responseText+":"+textStatus+":"+errorThrown);

            }

         });
        return false;
     });

Collectives™ on Stack Overflow

Unable to retrieve JSON data from url in html page using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related