WEB API + ASP.NET trying to display data from WEB.API in json format

Question

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.

Have you tried adding your jQuery code inside a document.ready function? — Niklas
– Niklas, Commented May 16, 2014 at 13:41

Chandrika Prajapati · Accepted Answer · 2014-05-20 09:20:36Z

1

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

$.support.cors = true;

answered May 20, 2014 at 9:20

Chandrika Prajapati

8671 gold badge6 silver badges11 bronze badges

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

Comments

BenjaminPaul · Accepted Answer · 2014-05-16 14:15:02Z

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.

yrthilian · Accepted Answer · 2014-05-17 11:37:30Z

1

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.

answered May 17, 2014 at 11:37

yrthilian

6310 bronze badges

Comments

blorkfish · Accepted Answer · 2014-05-16 14:10:57Z

0

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() ...

answered May 16, 2014 at 14:10

blorkfish

23.1k4 gold badges35 silver badges24 bronze badges

3 Comments

yrthilian Over a year ago

found this in chrome: Uncaught TypeError: Cannot read property 'nodeName' of null. not sure what is the issue

blorkfish Over a year ago

So you are getting an error. Set a debug breakpoint and see what object Object is.

yrthilian Over a year ago

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.

Collectives™ on Stack Overflow

WEB API + ASP.NET trying to display data from WEB.API in json format

4 Answers 4

Comments

1 Comment

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

3 Comments

Related