How to use Freshdesk API to create a new ticket with custom fields using javascript

I have a function that is fired when the user clicks "submit" on a form. Everything will get submitted to freshdesk except for custom_fields.

I'm using Angular 1.4 with controller so ctrl is my controller. Here's my code:

   function postTicket() {
  var formdata = new FormData();

  var customFields = {
    "serial_number": ctrl.newTicket.serialnumber
  };
  customFields = JSON.stringify(customFields);


  formdata.append('description', ctrl.newTicket.description);
  formdata.append('subject', ctrl.newTicket.subject);
  formdata.append('type', ctrl.newTicket.type);
  formdata.append('email', ctrl.newTicket.email);
  formdata.append('custom_fields', customFields);
  formdata.append('status', 2); // open
  formdata.append('priority', 1); // low

  supportResource.postTicket(formdata).then(
    results => {
      console.log('it worked! ', results);
      ctrl.formSent = true;
    },
    error => {
      console.log('something went wrong. ', error);
    });
}

and here's the supportResource code:

function postTicket(ticket) {
  return $q(function(fulfill, reject) {
    $http({
      url: `https://${MYACCOUNT}.freshdesk.com/api/v2/tickets`,
      method: 'POST',
      headers: {
        'Authorization': 'Basic ' + btoa(MYKEY),
        'Content-Type': undefined
      },
      data: ticket
    }).then(
      results => {
        fulfill(results.data);
      },
      error => reject(error));
  });
}

I get back the following error: "Value set is of type String.It should be a/an key/value pair"

I have followed the example from here: https://github.com/freshdesk/fresh-samples/blob/master/jquery/create_ticket_with_attachment.html

and also I see this: https://support.freshdesk.com/support/solutions/articles/216548-create-and-update-tickets-with-custom-fields-using-api

but this example is using CURL, I'm not sure how to send the data using FormData() http://developer.mozilla.org/en-US/docs/Web/API/FormData

I want to share the solution here in case other people come across this. This is specific to freshdesk API and how it is expecting the data. Form-data has very simple syntax:

Syntax

There are two versions of this method: a two and a three parameter version:

• formData.append(name, value);
• formData.append(name, value, filename);

Therefore by changing the name from a string to reference the custom_field name as an associative array like this: custom_fields[serial_number] then the API understands what key is being used and will be able to read the form-data value

function postTicket() {
  var formdata = new FormData();

  formdata.append('description', ctrl.newTicket.description);
  formdata.append('subject', ctrl.newTicket.subject);
  formdata.append('type', ctrl.newTicket.type);
  formdata.append('email', ctrl.newTicket.email);
  formdata.append('custom_fields[serial_number]', ctrl.newTicket.serialnumber);
  formdata.append('status', 2); // open
  formdata.append('priority', 1); // low

  supportResource.postTicket(formdata).then(
    results => {
      console.log('it worked! ', results);
      ctrl.formSent = true;
    },
    error => {
      console.log('something went wrong. ', error);
    });
}