Reputation: 43
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 = "[email protected]",
company = "Germany",
pictureURL = "......jpg"
},
new Customer
{
Id = 2,
firstName = "Svenja",
lastName = "Hofmeister",
emailAddress = "[email protected]",
company = "Germany",
pictureURL = "......jpg"
},
new Customer
{
Id = 3,
firstName = "Marvin",
lastName = "Hofmeister",
emailAddress = "[email protected]",
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
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
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
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
Reputation: 21
try changing the url to this one --> ControllerName/Method
Upvotes: 0