React-Admin with .net .The response to 'getList' must be like { data : [{ id: 123, ...}, .-CodePudding

I have an ASP.NET Core Web API and a React client. I'm trying to build admin dashboard with React-Admin. My problem is when I receive the data from server, my object are with property Id (uppercase), then in console I'm getting an error

The response to 'getList' must be like { data : [{ id: 123, ...}, ...] }, but the received data items do not have an 'id' key

I tried making new test class with property id (lowercase) in my server and then the problem is gone.

How can I fix this issue?

This is my test class and its working.

public class CityModel
{
    public string id { get; set; }
    public string Name { get; set; }
}

[HttpGet("Cities")]
public CityModel[] GetCities()
{
    var city1 = new CityModel()
        {
            id = "ahsxge",
            Name = "Berlin"
        };
    var city2 = new CityModel()
        {
            id = "axhdagw",
            Name = "London"
        };

    var list = new List<CityModel>();
    list.Add(city1);
    list.Add(city2);

    Response.Headers.Add("Access-Control-Expose-Headers", "X-Total-Count");
    Response.Headers.Add("X-Total-Count", list.Count.ToString());

    return list.ToArray();
}

This is my component in react :

const AppAdmin = () => {
const jwt = localStorage.getItem("jwt");
const httpClient = (url, options = {}) => {
    options.user = {
        authenticated: true,
        token: 'Bearer '   jwt
    };
    return fetchUtils.fetchJson(url, options);
};

const dataProvider = jsonServerProvider('https://localhost:44366/api', httpClient);
dataProvider.getList('Cities/Cities', {
   pagination: { page: 1, perPage: 15 },
   sort: { field: 'Name', order: 'ASC' },
   
})
.then(response => console.log(response));

return (
    <Admin dataProvider={dataProvider}>
        <Resource name='Cities/Cities' list={CitiesList} /> 
    </Admin>
)
}
export default AppAdmin

CodePudding user response：

You can configure the json converter to use camelCase serialization int the ConfigureServices method in the Startup.cs file the following way:

services
    .AddControllers()
    .AddJsonOptions(opts =>
    {
        opts.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;
    })

This way you can use PascalCase properties in your c# code (which you should do), but your client will recieve camelCase json properties.