Скачать или смотреть How to Arrange Results of a forEach Function into an Array in JavaScript

A comprehensive guide to handle and manipulate form data using JavaScript to create arrays before sending via Ajax.
---
This video is based on the question https://stackoverflow.com/q/62608772/ asked by the user 'mountain' ( https://stackoverflow.com/u/3940222/ ) and on the answer https://stackoverflow.com/a/62608839/ provided by the user 'Sven.hig' ( https://stackoverflow.com/u/9922011/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to arrange results of a for each function into an array in javascript

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Arrange Results of a forEach Function into an Array in JavaScript

When handling form submissions in JavaScript, developers often face the challenge of gathering multiple values with the same name into a structured format like an array. This task can be particularly tricky, especially when working alongside AJAX for sending data to a server. If you’ve encountered the error message "Uncaught TypeError: dArray.push is not a function," you’re not alone. It’s a common issue that arises from mishandling variable types while trying to collect input data.

Understanding the Problem

You're attempting to collect values from a set of inputs that share the same name (like dataA[]). Your goal is to accumulate these values into an array before sending them to the server using AJAX. The issue you're facing stems from the way variable assignments are made within a loop.

Here's a breakdown of how the error can occur:

You create an empty array for each variable.

However, you later reassign those array variables to string values from the inputs, which causes the push function to fail because you've changed the type from an array to a string.

Step-by-Step Solution

To resolve this, you need to ensure that your arrays remain intact when collecting data from the input fields. Here’s how you can achieve this:

Step 1: Initialize Your Arrays

First, create an empty array for each desired input:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Collect Input Values Using a Loop

Inside the loop, rather than reassigning the array variables, create temporary variables to hold the values from the input fields. Then, push these temporary variables into your arrays.

Here's the updated code:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Convert Arrays to JSON Strings

After collecting all the values, you can convert the arrays into JSON format for easy transmission:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Prepare the Data For AJAX

Once you have your JSON strings ready, assemble them into a format suitable for your AJAX request:

[[See Video to Reveal this Text or Code Snippet]]

Step 5: Sending Data Using AJAX

Finally, send your structured data using AJAX:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following the steps above, you'll successfully gather multiple input values into separate arrays and format them for an AJAX request. Remember not to reassign your array variables to primitive values such as strings while collecting data. This simple oversight can lead to frustrating errors that halt your script. With these techniques at your disposal, you’re all set to handle form submissions more efficiently and effectively!