JSON serialization issue with JSON Oject using Vue and ASP.NET Core DTO model

Question

In my Vuex store I am creating the data object with the detail object inside it then using axios I am sending the data to the backend. I keep getting error 400 bad request

Error message

Cannot deserialize the current JSON object (e.g. {\"name\":\"value\"}) into type 'System.Collections.Generic.List`1[home_inventory.Models.DTO.Detail]' because the type requires a JSON array (e.g. [1,2,3]) to deserialize correctly.

The data being sent

const data = {
            Name: "name",
            Detail: {
                CategoryId: 1,
                Manufactuerer: 1,
                Model: "",
                SerialNumber: "", 
                PurchasePlace: "", 
                Quantity: "",  
                AcquiredDate: "",  
                PurchasePrice: "", 
                CurrentValue: "",
                ConditionId: 1,
                LocationId: 1,
                RetiredDate: "",
                Description: ""
            }
        };

axios.post('https://localhost:5001/api/Assets', data)
            .then(res => console.log(res))
            .catch(error => console.log(error));

Then I have my ASP.Net Core web api backend DTO model like so http post controller

[HttpPost]
        public async Task<ActionResult> PostAsset([FromBody] AssetSaveRequest assetCreationDto)
        {
           
           var asset = _mapper.Map<Asset>(assetCreationDto);
            _context.Assets.Add(asset);
            //await _context.SaveChangesAsync();
            var assetDto = _mapper.Map<AssetDto>(asset);

            return CreatedAtAction("GetAsset", new {assetDto.Id}, assetDto);
        }

DTO Model

 public class AssetSaveRequest
    {
        public string Name { get; set; }
        public List<Detail> Detail { get; set; }
        public byte[] Files { get; set; }
    }

    public class Detail
    {
        public int CategoryId { get; set; }
        public int ManufacturerId { get; set; }
        public string Model { get; set; }
        public string SerialNumber { get; set; }
        public string PurchasePlace { get; set; }
        public int Quantity { get; set; }
        public DateTime AcquiredDate { get; set; }
        public float PurchasePrice { get; set; }
        public float CurrentValue { get; set; }
        public int ConditionId { get; set; }
        public int LocationId { get; set; }
        public DateTime RetiredDate { get; set; }
        public string Description { get; set; }
    }

I am not sure how to fix this to get it to work correctly can anyone give me any help in the right direction.

any assistance would be helpful.

Answer 1

A .NET List property like List<Detail> corresponds to an array in JSON. So you'd want to wrap Detail as an array, like:

const data = {
    Name: "name",
    Detail: [
        {
            CategoryId: 1,
            ...other values
        }
    ]
};

Note the square brackets around the single Detail object. It would be clearer also to rename to DetailItems which indicates a listing/array rather than a single item.