What is the best way to transfer an array of AJAX column data to a JavaScript function?

I'm trying to figure out how to pass data from an AJAX Datatable column, which is an array, to a JavaScript function.

Below is my script.js:

    table = $("#table").DataTable({
        ajax: {
            url: "/Object/GetAllDetail",
            data: {  },
            type: 'POST',
            datatype: "json",
            dataSrc: "",

            dataFilter: function (data) {
                var json = jQuery.parseJSON(data);
                json.recordsTotal = json.TotalCount;
                json.recordsFiltered = json.TotalCount;
                json.data = json.list;
                return JSON.stringify(json); // return JSON string
           },
        },
        "columns": [
        {
            "data": null,
            "className": "checkbox",
            "render": function (data, type, full, meta) {
                var ACT = '<div class="form-check">';
                ACT += '<input type="checkbox" name="CheckBoxDatatbl" onclick="Display(' + data.text + ',' + data.ArrayNum + ')"  + ' >';
                ACT += '</div >';
                return ACT;
            }

        }]
    }

    function Display(text, array){
         return text + " : " + array;
    }

In the example below:

data.text = "First Row";
data.ArrayNum = [1,3,5];

The issue lies in how AJAX converts the data.ArrayNum to arrays before sending them to the function. This results in the following output:

<input type="checkbox" name="CheckBoxDatatbl" **onclick="Sum("First Row",1,3,5)"** >

As a result, only the Display("First Row",1) portion is recognized by the Display() function, not the entire array.

Any ideas on how I can concatenate all elements of the array within the function?

Answer №1

If you're looking for a simple solution, one quick trick is to enclose your array with brackets like this:

 ACT += '<input type="checkbox" name="CheckBoxDatatbl" onclick="Display(' + data.text + ',[' + data.ArrayNum + '])"  + ' >';

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

The animation freezes when trying to create geometry and mesh using Three.js

I'm currently working on developing a text animation that scrolls and dynamically adds more content as it runs. Here is the function I have created for generating the text geometry and mesh: function createText(){ textGeo = new THREE.TextGeometry( ...

Extracting data from a Razor page and passing it to an action method

I have an application that retrieves a list of records (applications) from a database and displays them on the screen. The records are loaded in a partial view (_ViewAllpartial.cshtml) and embedded in the Index.cshtml. Each record has a delete button, whic ...

Sending data from a child component to a parent component in React

Trying to figure out how to pass the returned value of function appColor from the WeatherForecast component into a property, and then passing that property from WeatherForecast to the className of the app component. I'm new to React, so not sure how t ...

A guide to turning off tab discarding in Google Chrome with JavaScript

Is there a way to prevent Chrome from discarding tabs on chrome://discards/ using JavaScript so that the tab remains open even after closing the page or browser? I am aware that this can be achieved with an extension, but I am interested in creating my o ...

Recorded data to file, memory consumption steadily rising

I am facing an issue with my application where I need to constantly write binary data to a file. The data packets are small, around 1K each. The computers running this application are old and operating on XP. Whenever I enable logging, the computers slow d ...

Is there a way to verify that all of my HTML elements have been loaded in AngularJS?

I am currently utilizing angularJS version 1.2.1 along with angular-ui-bootstrap. Within my code, I have a collection of <ng-includes> tags from angularjs and <accordion> components from angular-ui. When loading the content, I need to initiat ...

Learn how to create an animated refreshing icon in React when clicked

I have a refresh icon in my React app that utilizes Material UI. I want the icon to spin for a second after it is clicked, but I am unsure of how to achieve this. Despite attempting some solutions, none have been successful. const useStyles = makeStyles(( ...

Numerous Affirmations within MSTest

In the process of developing a C# based Selenium .Net application testing suite using MSTest, I have reached an advanced stage of development. However, I am now faced with the challenge of implementing multiple assertions for a test case. Unfortunately, af ...

Developing and integrating views within a node-webkit desktop application

For my file copier desktop application built with node webkit, I aim to create a seamless flow where the initial check for existing profile data determines the first page displayed. The header with static links/buttons to various views remains consistent ...

Strategies for managing events within functional React components without relying on mutative operations

Based on insights from Cam Jackson, the recommendation is to utilize Redux and create small, stateless functional components. For example: const ListView = ({items}) => ( <ul> {items.map(item => <ItemView item={item}/>)} ...

Choosing various choices using AngularJS

My goal seems simple using vanilla JS, but with AngularJS, I'm looking for the best way to achieve it within the framework. I aim to update the selected options in a multiple select box without adding or removing any options. Below is a snippet of my ...

Follow button on LinkedIn is secure with Google Chrome's Content Security Policy set to script-src report-sample

Having an issue trying to add a LinkedIn Follow button to the website. It works perfectly in Firefox, but is not functioning in Chrome. The Console displays the following error: The source list for Content Security Policy directive 'script-src&apos ...

Methods to prompt a user to select an option using Bootstrap

I have been struggling with this problem for hours and it's really starting to frustrate me! Currently, I am incorporating Twitter Bootstrap along with bootstrap-min.js. This is the code snippet in question: <select id="assettype" name="assettyp ...

Steps to Extract the key value from the parseJson() function

Could someone assist me in retrieving the value of the "id_user" key from the script provided below? JSON.parse({ "data": [ { "id_user": "351023", "name": "", "age": "29", "link": "http://domain. ...

Error: Unhandled promise rejection - The function get is not part of this.categoryMap

I am facing an issue with calling functions of the Map (get, set, keys, etc) within my function. The map I am working with is returned from a firebase query. Here's a snippet of my code: categoryMap = new Map<Number, String>(); //called onInit ...

Utilize jQuery's AJAX functionality to transmit data

I am encountering an issue when trying to send the selected option using ajax. Sample Code: $("#editarConta").on('submit',(function(e) { e.preventDefault(); $.ajax({ url: "includes/php/class_conta.php", ...

Can a data filter be customized to fit a specific grid layout, ensuring that all images are displayed in a full column or at a designated size?

Check out this awesome box grid https://i.sstatic.net/qbmQz.jpg But here's the issue: when I add a data filter and switch between filters, the images always appear in the same location and size as the original grid. Is there any way to make the filte ...

Converts null value from C# to 'NULL' in Sql Server

I need to handle inserting a NULL value in Sql Server when the corresponding C# String object is null, as shown below: String Residence = xmlDoc.Descendants("Appointment").Single().Element("StateOfResidence") == null ? null : xmlDoc.Descendants("Appointme ...

The function will provide the value prior to the execution of the Jquery image loading

if (DataService.Validation(file)) { //angularjs call to api controller }; //DataService Validation: function (file) { var Url = URL.createObjectURL(file); var img = new Image(); $(img).load(function () { var imgwidth = this. ...

Steps to turn off filtering in a telerik grid

At the moment, I am implementing a Telerik grid where filters are applied to each individual column. I am connecting the SQL result set to the grid. In cases where the result set is empty from the database during binding, I need to be able to disable the f ...