Converting a JavaScript array to formData

Question

Converting a JavaScript array to formData

Struggling with sending an array via Ajax to PHP.

For more information, visit jsfiddle https://jsfiddle.net/CraigDavison/9spyn7ah/

 function autoPopulate() {
   var cast = "John Wayne, Julia Roberts, Kevin Spacey";
   cast = cast.split(', ');
   var arr_cast = [];

   $.each(cast, function() {
      arr_cast.push(this);
   });
   return_ajax_result('app/handlers/get_cast_ids.php', {cast: arr_cast});
}

Aiming to convert a string of movie actors into an array. This list should be associated with "Cast" as cast=[actor 1, actor 2, actor 3].

The issue arises when attempting to append this to the formData because it remains empty.

Would appreciate any insights on this matter. Thank you!

javascript arrays ajax

Answer 1

Answer №1

To create another array, you don't actually need to use the .each function because by splitting your string with commas, you are already creating an array for the variable cast. Your ajax method appears to be correct, but you can simplify it by using the request body instead of FormData since FormData is typically used for file uploads.

When handling errors, it is advisable to name your callback value something like err or error for better readability and understanding, both for yourself and others.

I have made some modifications to your code in the forked fiddle:

function autoPopulate() {
  var cast = "John Wayne, Julia Roberts, Kevin Spacey";
  cast = cast.split(', ');
  return_ajax_result('app/handlers/get_cast_ids.php', {cast});
}

function return_ajax_result(url, params) {
  var request = $.ajax({
    method: 'post',
    url: url,
    data: params,
    beforeSend: function() {
      $(".ng-loading-container").addClass("ng-loading-container-show");
    },
    success: function(result) {
      console.log(result);
    },
    error: function(err) {
      console.log(err);
    },
  });
};

autoPopulate()

You can view the updated fiddle here: fiddle

Answer 2

To create another array, you don't actually need to use the .each function because by splitting your string with commas, you are already creating an array for the variable cast. Your ajax method appears to be correct, but you can simplify it by using the request body instead of FormData since FormData is typically used for file uploads.

When handling errors, it is advisable to name your callback value something like err or error for better readability and understanding, both for yourself and others.

I have made some modifications to your code in the forked fiddle:

function autoPopulate() {
  var cast = "John Wayne, Julia Roberts, Kevin Spacey";
  cast = cast.split(', ');
  return_ajax_result('app/handlers/get_cast_ids.php', {cast});
}

function return_ajax_result(url, params) {
  var request = $.ajax({
    method: 'post',
    url: url,
    data: params,
    beforeSend: function() {
      $(".ng-loading-container").addClass("ng-loading-container-show");
    },
    success: function(result) {
      console.log(result);
    },
    error: function(err) {
      console.log(err);
    },
  });
};

autoPopulate()

You can view the updated fiddle here: fiddle

Answer 3

Answer №2

There is no requirement for formData in this scenario.

Simply assign the params to your data variable

  var request = $.ajax({
    method: 'post',
    url: url,
    data: params,
    ...
  });

Jquery will handle all the necessary operations automatically.

Answer 4

There is no requirement for formData in this scenario.

Simply assign the params to your data variable

  var request = $.ajax({
    method: 'post',
    url: url,
    data: params,
    ...
  });

Jquery will handle all the necessary operations automatically.

Converting a JavaScript array to formData

Answer №1

Answer №2

Similar questions

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Switching the GET method to DELETE in nodeJS can be accomplished using an anchor tag

Encountering a Next.js error while trying to link to a dynamic page

Find the total of values in an array that may be null or undefined

Harness the power of Highcharts through an Ajax request to retrieve a JSON file

Display PDF blob in browser using an aesthetically pleasing URL in JavaScript

Utilize React-router to display child components on the webpage

Trigger a PHP script to execute whenever a user updates a row in a MySQL/WordPress database

"Unexpected error: .jqm is not defined as a

A tool designed to create a function that can fetch information from a JSON file

Discover the step-by-step process of combining an array with JSON to create the desired outcome

Is it possible for me to sum up each row in the table and then deactivate it using a checkbox?

React is unable to identify the property that was passed to a styled-component in Material UI

JQuery AJAX click event not triggering

Webpack attempting to load build.js from a nested folder

Learning the process of connecting functions to events

Executing multiple nested `getJSON` requests in a synchronous manner using jQuery

The issue of req.files being undefined in Express.js

Upon removing items using AJAX, the page automatically scrolls upwards

How can I properly implement a Closure or IIFE to manage an onclick event in ReactJS?