CODEWITHSUNDEEP
jqueryajaxasp.net-mvcjson
Florian Hofmeister
Florian Hofmeister

Reputation: 43

JQuery Ajax call to ASP.NET MVC API returns error

I have an api controller CustomerController that returns customers data:

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using CustomerMngmt.Models;

namespace CustomerMngmt.Controllers
{
    public class CustomersController : ApiController
    {
        private readonly Customer[] _customer =
    {
        new Customer
        {
            Id = 1,
            firstName = "Florian",
            lastName = "Hofmeister",
            emailAddress = "florianhofmeister@test.de",
            company = "Germany",
            pictureURL = "......jpg"
        },
        new Customer
        {
            Id = 2,
            firstName = "Svenja",
            lastName = "Hofmeister",
            emailAddress = "svenjahofmeister@test.de",
            company = "Germany",
            pictureURL = "......jpg"
        },
        new Customer
        {
            Id = 3,
            firstName = "Marvin",
            lastName = "Hofmeister",
            emailAddress = "marvinhofmeister@test.de",
            company = "Germany",
            pictureURL = "......jpg"
        }
    };



        public IEnumerable<Customer> GetAllCustomers()
        {
            return _customer;
        }

        public Customer GetCustomerById(int id)
        {
            var customer = _customer.FirstOrDefault(c => c.Id == id);

            return customer;
        }
    }
}

And then I load data in javascript with:

function loadCustomer() {

    jQuery.support.cors = true;
    $.ajax({
        url: 'http://localhost:54172/api/customers',
        type: 'GET',
        dataType: 'json',
        data:{},
        success: function (data) {

            for (var i = 0; i < data.length; i++) {
                var customer = new customer(
                    '1',
                    data[i].id,
                    data[i].firstName,
                    data[i].lastname,
                    data[i].companyName,
                    data[i].emailAddress,
                    data[i].pictureURL);

                self.customers.push(customer);
            }
        },
        error: function (x, y, z) {
            alert(x + '\n' + y + '\n' + z + "TEST");
            console.log(x + '\n' + y + '\n' + z + "TEST");
        }
    });
}

and my problem is that the function don't load the elements from the controller. Instead I get an error message [object Object]errorTEST.

Upvotes: 0

Views: 1140

Answers (4)

Skye MacMaster
Skye MacMaster

Reputation: 914

The url in your ajax doesn't match any controller or action. If the script is in a cshtml file you can use the url helper to build the url. For security reasons, I recommend using POST instead GET if you have authentication in this. Last, you can use responseText to see the actual error message.

$.ajax({
    url: @Url.Action("Customers", "GetAllCustomers"), // or try 'http://localhost:54172/Customers/GetAllCustomers'
    type: 'POST',
    success: function (data) {
        for (var i = 0; i < data.length; i++) {
            var customer = new customer(
                '1',
                data[i].id,
                data[i].firstName,
                data[i].lastname,
                data[i].companyName,
                data[i].emailAddress,
                data[i].pictureURL);

            self.customers.push(customer);
        }
    },
    error: function (x, y, z) {
        alert(x.responseText + '\n' + y + '\n' + z + "TEST");
        console.log(x.responseText + '\n' + y + '\n' + z + "TEST");
    }
});

Upvotes: 1

Christian Phillips
Christian Phillips

Reputation: 18769

There is nothing wrong with the API, I suspect it's your JavaScript that's blowing up when trying to create the customer collection. Try adding this to the JavaScript:

function customer(id, firstname, lastname, companyname, email, pic) {
            this.Id = id;
            this.FirstName = firstname;
            this.LastName = lastname;
            this.Company = companyname;
            this.email = email;
            this.Pic = pic;
        }

And alter the variable you're creating, I have changed to cus in my example...

var cus = new customer(
                        '1',
                        data[i].id,
                        data[i].firstName,
                        data[i].lastname,
                        data[i].companyName,
                        data[i].emailAddress,
                        data[i].pictureURL);

                    self.customers.push(cus);

Upvotes: 0

Grzegorz P.
Grzegorz P.

Reputation: 83

in my opinion you should obviously change url in ajax (/controller/action) and return json from your api controller. Therefore i don't see action named customers in your code.

Upvotes: 0

frustratedprogrammer
frustratedprogrammer

Reputation: 21

try changing the url to this one --> ControllerName/Method

Upvotes: 0

Related Questions