The binding of an array inside a model is not working properly if the model is nested within another

Currently, I am facing an issue with my REST API when trying to save arrays of "link" objects. The API works fine for adding a single "link" object as it binds to the model seamlessly. However, when passing an array of "link" objects, the List of strings does not bind correctly. I have attempted to use both a model that holds a List of Link and Link[] but encountered the same problem.

Here is the model structure:

public class Link
{
    [JsonProperty(PropertyName = "name")]
    public string name { get; set; }

    [JsonProperty(PropertyName = "fields")]
    public List<string> fields { get; set; }

    [JsonProperty(PropertyName = "imgPath")]
    public string imgPath { get; set; }

    [JsonProperty(PropertyName = "category")]
    public string category { get; set; }
}

The function in the controller:

public string PostLinkList([FromBody] List<Link> links)
    {
        // Function logic here...
        return JsonConvert.SerializeObject(links);
    }

The frontend implementation:

 $(".category").each(function ()
    {
        // Frontend script here...
    });
    // AJAX call snippet here...

This is what the data format looks like as a string, which is passed to the backend:

"[
{\"name\":\"test name\",
\"fields\":[\"field\",\"details\"],
\"imgPath\":\"optImg icon-print\",
\"category\":\"test\"},
{\"name\":\"test name\",
\"fields\":[\"field\",\"details\"],
\"imgPath\":\"optImg icon-print\",
\"category\":\"test\"},
{\"name\":\"test name\",
\"fields\":[\"field\",\"details\"],
\"imgPath\":\"optImg icon-print\",
\"category\":\"test\"}
]"

Answer №1

Remember to include and apply the JSON.stringify method in order to serialize the JSON data before sending an Ajax request using jQuery.

Answer №2

I managed to solve the issue by creating a new virtual directory since the updated code was not executing properly. By using JSON.stringify to send the links to the back-end with a Link[] instead of a list, all the issues were resolved. Thank you for everyone's assistance. I apologize if I caused any inconvenience.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn about Angular8's prototype inheritance when working with the Date object

In my search for a way to extend the Date prototype in Angular (Typescript), I stumbled upon a solution on GitHub that has proven to be effective. date.extensions.ts // DATE EXTENSIONS // ================ declare global { interface Date { addDa ...

Having difficulty specifying numerical entries only

I have been attempting to create an input field that only accepts numbers, but for some reason it still allows letters to be entered. Why is this happening? <input type="number" pattern="[0-9]" ...

Encountering a 406 error when using Spring MVC to send a response body object to an Ajax post

Despite researching similar links, I have yet to find a solution that works for my specific scenario. Therefore, I am reaching out to see if someone can provide me with a practical example that fits my needs. Currently, I am using an ajax get request to fe ...

Directive that can be reused with a dynamic item name in ng-repeat

I've developed a reusable directive similar to a dropdown, but this dropdown opens in a modal and is functioning well. The structure of my directive is as follows: <p-select items="deptStations" header-text="Select " text="Select departure..." te ...

Only the first element has been sent in the array; the rest are missing

I plan to retrieve all the post IDs from the current page at 15-second intervals in order to perform a server-side PHP query. The PHP query will search for matches in the SQL database based on the IDs, and if any data is found for a particular ID, it will ...

Load ASP.NET server-side URL without opening a new page or window

Currently, I am attempting to fetch a URL from the server side which happens to be an API responsible for sending SMS messages. The issue at hand is that I require this URL to load without triggering the opening of any new page or window. string url = "h ...

javascript issue with Q promise not passing complete parameters

I am struggling to pass all three arguments successfully in my promise callback. The issue I'm facing is that only one argument is being received instead of the expected three: var asyncFunction= function(resolve) { setTimeout(function() { ...

What are the steps for sending a file?

I am looking to send an image to my telegram bot using JavaScript, without the use of Node.js. To achieve this, I require the token of the bot and my Telegram user ID. While sending text messages is successful, I have also managed to send photos by provid ...

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

Display the contents of an array retrieved using the getElementById method

My goal is to utilize the document.getElemntById as a unique identifier for listing arrays function aircraft(operator) { var model = document.getElementById('model').value; var B738 = ['39.5', '35.8', '12.5', &a ...

When jQuery inserts JavaScript into the DOM, it does not automatically execute the code

UPDATE: I initially used filter(), which was incorrect. I have since switched to find(), but unfortunately the issue persists. This snippet of code functions properly for me: $('#content') .replaceWith($( '<div> <d ...

Activating the Mobile Menu Function when the Window is Resized

I've developed a JavaScript function that triggers on window resize. When switching between landscape and portrait orientation on mobile devices or tablets, the window dimensions change. This functionality is also useful for browser testing on desktop ...

Improving Database Insertion Efficiency in ASP.NET C#

Currently, I am working with asp.net 4 and visual studio 2010, using ms-sql server 2008 express. In my project, I have explored three different methods to insert data into a database table: Method 1: DataSet dsTab = new DataSet("Table1"); SqlData ...

Is it possible to extract attribute names of a DOM object using angular.element? If so, what is the process? If not, is there another way to access this information within Angular?

Is it possible to achieve this? If so, how can we accomplish it? Here is what I have attempted: // Assuming domObj is a dom element var ngObj = angular.element(domObj); var attrNames = ngObj[0].attributes; For example, let's consider the following d ...

Utilize a line break within a MySQL UPDATE statement

After using JSON.stringify, my stringified variable looks like this: {"ops":[{"insert":"drfsdfgg sdfg sdg \ns\ndfg\ndf\nsg\nsdfg\n"}]} However, when I perform an UPDATE, the data in the MySQL database appears as follows: ...

Passing PHP array via AJAX call

I am uncertain if this specific inquiry has been addressed previously, so please alert me if it is a duplicate. The initial line contains a PHP merged array that I am attempting to transmit via AJAX to another page. I am facing challenges in figuring out ...

Having issues with an Angular reactive form that includes a custom form-level validator and the 'blur' updateOn option?

Having issues combining the following: angular reactive form custom validator at form level (cross-field validator) usage of the 'updateOn' option set to 'blur' A demonstration of the problem can be found in this simple stackblitz: h ...

Having issues with importing momentjs by reference in TypeScript with amd configuration

I'm puzzled by the difference in behavior between these two snippets: import * as moment from "../Typings/moment"; One works, while this one doesn't: /// <reference path="../Typings/moment.d.ts" /> import * as moment from "moment"; It t ...

Navigating through object keys in YupTrying to iterate through the keys of an

Looking for the best approach to iterate through dynamically created forms using Yup? In my application, users can add an infinite number of small forms that only ask for a client's name (required), surname, and age. I have used Formik to create them ...

Executing React's useEffect inside a loop will result in only the last effect being triggered

My application features a collection of checkboxes with an option to select or deselect all at the top. I manage the selected checkboxes in a state array, and when a checkbox is toggled, a useEffect() function is triggered to place markers on a Leaflet map ...