Failed to load resource: the server responded with a status of 406 (Not Acceptable) when my REST api call

Question

Failed to load resource: the server responded with a status of 406 (Not Acceptable) when my REST api call works in site. But when I enter the REST url in browser it returns the result. So nothing wrong with the URL. I have the following code which I run against SP 2013 environment, I slightly converted this code which was perfectly worked with SP 2010 environment.

<script type="text/javascript">

    $(document).ready(function() {

        $.getJSON("siteURL/_api/lists/getbytitle('Laptops')/items?$select=Title,Id", function (data) {
            var html="";
            var count = 0;
            $.each(data.d.results, function(i,result) {
                var title = result.Title;
                html = "<table><tr><td>" + title +"</td></tr> <tr></tr></table>";

                $('#resultarea').append($(html));
            });

        });

    });

Answer 1

Inspect the return results using your browser dev tools -- my environment (using O365 and jquery 1.11.1) returns the results from $.getJSON(url, function(data) { //do something with data }); in data.value no d, or d.results

This works on my O365 site:

$.getJSON("/_api/lists/getbytitle('Laptops')/items?$select=Title,Id", function (data) {
        html = "<table>";
        $.each(data.value, function(i,val) {
            html += "<tr><td>" + val.Title +"</td></tr>";
        });
        html += "</table>";
        $('#resultarea').html(html);
});

I took the liberty of optimizing your write routine a little, fewer DOM manipulations are always faster!

Answer 2

I'm not sure why $.getJSON() does not work, but $.ajax() should work:

$(document).ready(function() {
    var oDataUrl = "siteURL/_api/lists/getbytitle('Laptops')/items?$select=Title,Id";
    $.ajax({
        url: oDataUrl,
        type: "GET",
        headers: {
            "Accept": "application/json; odata=verbose",
            "Content-Type": "application/json; odata=verbose"
        },
        success: function (data) {
            var html="";
            var count = 0;
            $.each(data.d.results, function(i,result) {
                var title = result.Title;
                html = "<table><tr><td>" + title +"</td></tr> <tr></tr></table>";

                $('#resultarea').append($(html));
            });
        },
        error: function(data, errorCode, errorMessage) {
            alert("An error occurred: " + errorMessage);
        }
    });
});