Sending an AJAX request will only transmit a portion of an array when using the JSON.stringify

I have a JavaScript array that is constantly updated.

Here's how I initially set up the array...

columnArray = ["userID", "Date", "trialType", "cue", "target", "response", "accuracy", "lenAcc", "strictAcc", "fkpl", "totalTime"];
var dataArray = [];
dataArray.push(columnArray);

Later on, I modify the data based on various events and calculations...

dataArray.push(userID, new Date(), trialType, cue, target, response, accuracy, lenAcc, strictAcc, fkpl, totalTime);

When displaying the array using this code...

document.getElementById("trial").innerHTML = dataArray;

...everything appears neat with line breaks for readability:

userID,Date,trialType,cue,target,response,accuracy,
lenAcc,strictAcc,fkpl,totalTime,
Ad31,Mon Dec 18 2017 11:35:55 GMT-0500 (Eastern Standard 
Time),copy,hello,world,xzzvxzxvxzxcv,0,0,0,938,5001 

However, when I attempt to save the data using this function...

function saveData(){
$.ajax({
    type: "POST",
    url: "saveData.php",
    dataType: "application/json",
    ContentType: "application/json; charset=utf-8",
    data: {"data": JSON.stringify(dataArray)},
  })
}

...only the header information is sent (again with line breaks):

[["userID","Date","trialType","cue","target","response","accuracy",
"lenAcc","strictAcc","fkpl","totalTime"]]

I read somewhere that perhaps my array should be an object instead, so I tried...

var dataArray = {};

...instead of...

var dataArray = [];

But will I still be able to use dataArray like a regular array if I make this change (e.g., push items to the end, store large amounts of data, etc.)?

Or could there be another underlying issue causing this problem?

My ultimate goal is to have each "trial" represented on a single line in the array, for better formatting. But for now, I just want to ensure the data is correctly saved.

Thank you!

SOLVED! The issue has been resolved. The problem was simply that I was calling my Ajax save function BEFORE appending the data to the array with push(). Once I rearranged my save function to execute right after pushing the data into the array, the file gets saved with all essential details intact!

Answer №1

Hooray! I've managed to resolve my issue by realizing that I needed to fill the array with data before calling saveData().

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 presence of a Bootstrap addon is resulting in horizontal scrolling on mobile devices within the webpage

I am encountering a peculiar issue with an input-group in my cshtml file which features a Bootstrap addon. The problem arises on mobile devices, where upon focusing on the input field, the page scrolls horizontally to the right, revealing the right margin ...

Retrieving width and height of the content block inner in Framework7, excluding navbar and toolbar dimensions

Is there a reliable way to determine the width and height of the page content-block-inner, excluding the navbar and toolbar? This measurement can vary across different devices and operating systems. I attempted to assign an id to the content-block-inner a ...

Transforming a cURL command into its equivalent in pyCurl

Currently, I have a Patch request implemented using cURL. Now, my goal is to accomplish the same functionality in Python: curl -X Patch -H "content-type: application/json" -d '{"activation": {"mode":"activate_immediate"},"transport_params":[{"destina ...

Utilizing a JSON object in JSP and integrating it seamlessly with JQuery

After developing a JSP application to retrieve search results using Lucene and storing them in a Bean, I utilized JQuery Ajax for displaying the outcomes. $.ajax({ url : "search.jsp", data : "search=test", success : function(html) { (" ...

When using npm install with a forked library, the installation may not be fully completed

Currently, I am working on a private Node.js project developed using Nest.js. For this project, I am utilizing the node-coap library, which I have forked into our company's GitHub profile. However, when I try to install it into the project using npm i ...

Dynamic Image Grid Created Using JavaScript Glitches

My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves i ...

Issues with ontimeupdate event not triggering in Chrome for HTML5 audio files

After creating an HTML5 audio element and setting a listener for when its time updates, I have run into an issue where the ontimeupdate function does not fire in Chrome, including Chrome on Android. The audio plays without any issues in other browsers. va ...

Issue with BrowserRouter, improperly looping through the array using map

Encountering an issue with importing content in my React app project using <BrowserRouter>. Within the app, there are 3 Material-UI Tabs: /lights, /animations, /settings. <Switch> <Route path="/lights" component={LightsMenu} /> ...

Encountering an issue with top-level await in Angular 17 when utilizing pdfjs-dist module

While using the Pdfjs library, I encountered an error message that reads: Top-level await is not available in the configured target environment ("chrome119.0", "edge119.0", "firefox115.0", "ios16.0", "safari16.0" + 7 overrides) /****/ webpack_exports = g ...

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

Leverage the power of JSON values by incorporating them directly into HTML tags

My JSON file is generating the following styles: { "h1" : { "font-family" : "Lato", "font-size" : "24px", "line-height" : "28px", "font-weight" : 600, "colorId" : 3, "margin-bottom" : "10px", "margin-top" : "20px" }, "h2" : { ...

Retrieve pairs of items from a given variable

Containing values in my 'getDuplicates' variable look like this: getDuplicates = 100,120,450,490,600,650, ... These represent pairs and ranges: Abegin,Aend,Bbegin,Bend My task is to loop through them in order to apply these ranges. var ge ...

Trouble with the div element's change event

Hey there! I'm having trouble with this jQuery code that is supposed to fade in or fade out a div based on its contents. Here is the HTML code: <div class="mainContentWrapper"> sample text </div> And here is the CSS code: div.main ...

How to Disable a Button with JavaScript in a Vue.js Application Without Using jQuery

I'm currently in the process of transitioning old jQuery code to JavaScript for a Vue.js application. function DisableSubmit() { submitButton.prop('disabled', true); submitButton.attr('data-enabled-value', submitButton.val ...

Trigger functions by clicking or bind click events by calling a function?

I need help comparing two similar code snippets: myFunc(); function myFunc() { var e = document.getElementByClassName("link"), i = e.length; while (i--) { e[i].addEventListener("click", function() { //do stuff for each ...

Creating dynamic forms with JQuery and ReactJS

I have been tasked with creating a form-builder that will be integrated into an application. My role is to focus on designing the front-end using ReactJS. The client’s requirements are very similar to the features of the "jQuery Form-Builder," so I decid ...

What is the best way to extract the last JSON object from a JSONArray based on a specified value

I am currently working with a JSONArray that looks like the following: [ { "id": 1, "firstName": "abc", "isActive": true }, { "id": 2, "firstName": "cde", "isActive": false }, { " ...

Exploring PHP sessions across main and subdomains

Is it possible to pass sessions from one domain to another using Ajax in PHP? This is the index.html in domain.com domain.com index.html -> jQuery $.post($url,$form.serialize(),function(e){console.log(e)}); This is the index.php in sub.domain.com sub ...

The AJAX request encountered an error while trying to send a POST request to the http://localhost/upload/undefined endpoint. The

I've been scouring the internet and testing for hours, but I'm still unable to identify the source of the error. I could really use some assistance here. I meticulously followed a tutorial on multiple file uploads with drag & drop functionali ...

The issue arises when trying to serialize a Django 1.5 AbstractBaseUser with a primary key of type char,

My custom user model is set up using Django 1.5 AbstractBaseUser like this: class Merchant(AbstractBaseUser): email = models.EmailField() company_name = models.CharField(max_length=256) website = models.URLField() description = models.Tex ...