current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I have been trying to pull in information from my web API into my application. Currently i am just trying to pull in data not submit it yet. The API is working and running as a service on my system.

It is returning data in json format an example of the data returned by the WEB API.

    [
  {
    "$id": "1",
    "id": "6c32e378-0f06-45da-9dda-0515c813cd5d",
    "application_name": "FDB INTERFACE",
    "description": "Interface for FDB decision support",
    "active": true,
    "tbl_update_header": []
  },
  {
    "$id": "2",
    "id": "58f68624-3803-43ff-b866-0a507ea85459",
    "application_name": "HPM",
    "description": "Helix Health Practice Manager",
    "active": true,
    "tbl_update_header": []
  },

This is my page just to try and get the some data to display

        <html>
<head>
    <title></title>
    <script src="~/Scripts/jquery-2.1.1.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: "GET",
            url: "http://localhost:9981/API/Application",
            processData: true,
            data: {},
            dataType: "json",
            error: function (jqXHR, textStatus, errorThrown) {
                // debug here
                alert(jqXHR);
            },
            //error: function(error, data){
            //    console.log(error)
            //},
            success: function (data) {
                //Clear the div displaying the results
                $("productView").empty();
                //Create a table and append the table body
                var $table = $('<table border="2">');
                var $tbody = $table.append('<tbody />').children('tbody');
                //data - return value from the web api method
                for (var i = 0; i < data.lenght; i++) {
                    //adda new row to the table
                    var $trow = $tbody.append('<tr />').children('tr:last');
                    //add a new column to display name
                    var $tcol = $trow.append('<td/>').children('td:last').append(data[i].id);
                    //add a new column to display description
                    var $tcol = $trow.append('<td/>').children('td:last').append(data[i].description);
                }
                //display the table in the div
                $table.appendTo('#productView');
            }
        });
    </script>

</head>
<body>
    <div id="productView"></div>
</body>
</html>

The page loaded but is empty and no error is returned from any section. I run the web page from chrome/FF/IE none of them show error in dev mode and VS shows no errors. I am not sure if i am parsing the data wrong or calling to the wrong part of the json to display the data.

I must be doing something silly at this point but just cant get pass this part.

share|improve this question
    
Have you tried adding your jQuery code inside a document.ready function? – Niklas May 16 '14 at 13:41
    
tried that same issue – yrthilian May 16 '14 at 14:44
up vote 1 down vote accepted

you can also set this property in your js file before ajax call

$.support.cors = true;
share|improve this answer
up vote 1 down vote

There is a typo in your success method...

 success: function (data) {
                //Clear the div displaying the results
                $("productView").empty();
                //Create a table and append the table body
                var $table = $('<table border="2">');
                var $tbody = $table.append('tbody /').children('tbody');
                //data - return value from the web api method
                for (var i = 0; i < data.length; i++){
                    //adda new row to the table
                    var $trow=$tbody.append('<tr />').children('tr:last');
                    //add a new column to display name
                    var $tcol = $trow.append('<td/>').children('td:last').append(data[i].application_name);
                    //add a new column to display description
                    var $tcol = $trow.append('<td/>').children('td:last').append(data[i].description);
                    //add a new column to display active
                    var $tcol = $trow.append('<td/>').children('td:last').append(data[i].active);
                }
                //display the table in the div
                $table.appendTo('#productView');

It should be data.length and not data.lenght.

share|improve this answer
    
corected the spelling mistake but still having same issue – yrthilian May 16 '14 at 14:36
up vote 1 down vote

Success. The issue was with CORS. also with the spelling mistake of data.length The code works fine and the results are what i was wanting to get . Thank you all for your assist.

To fix the issue i had to enable CORS in iis server side to allow cross domain access.

share|improve this answer
up vote 0 down vote

Your code above has a success function, but not an error function.

Try setting an error function, and then see what happens : 

data: {},
dataType: "json",
error: function(jqXHR, textStatus, errorThrown ) {
   // debug here
   alert(jqXHR);
},
success: function() ...
share|improve this answer
    
The error i am getting is [object Object] – yrthilian May 16 '14 at 14:16
    
found this in chrome: Uncaught TypeError: Cannot read property 'nodeName' of null. not sure what is the issue – yrthilian May 16 '14 at 14:24
    
So you are getting an error. Set a debug breakpoint and see what object Object is. – blorkfish May 16 '14 at 14:27
    
i tried adding break point but it will only let me do it on the whole script. >.< So it would seem something before is trowing it off. – yrthilian May 16 '14 at 14:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.