Question 109988 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Sending Object Arrays as JSON using FormData

I am sending a FormData object to an endpoint. A phone number needs to be formatted as this JSON:

"phone": [{"type":"main", "value":"#"}, ...] or it gets rejected. A single object with a two-pair of keys and values in an array.

const doStuff = () => {
  const formData = new FormData()

  **Have tried below for setting key/value of phone object**

  // Attempt 1
  formData.set('phone', [{ type: 'main', value: '313-555-2121' }])
  // Returns:
  "phone":"[Object Object]"

  // Attempt 2
  formData.set(
    'phone',
    JSON.stringify([{ type: 'main', value: '313-555-2121' }])
  )
  // Returns
  "phone":"[{"type":"main","value":"313-555-2121"}]"

  // Format as single "fields" object and stringify (results in fields: {...stuff}), API needs this.
  const formattedForApi = JSON.stringify({fields: Object.fromEntries(formData.entries())})

  // MAKE POST REQUEST...
}

The API errors on both of my attempts above. Complaining of an invalid first value which needs to be "main". Am I missing something with how stringify is affecting the data that is actually being sent?

For those wondering, the API is Podio

Tags:

2

Answers


  1. 0

    Sending arrays as JSON in FormData is possible, but it requires encoding the arrays into strings before adding them to the FormData object. Here’s an example in JavaScript:

    const formData = new FormData();
const array = [1, 2, 3];

// Encode the array into a string
const encodedArray = JSON.stringify(array);

// Add the encoded array to the FormData object
formData.append("array", encodedArray);

// Send the FormData object in an HTTP request
fetch("https://example.com/api", {
    method: "POST",
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

    On the server-side, you can decode the string back into an array and use it as needed. The specific implementation will depend on the server-side language you’re using.

    Login or Signup to reply.
  2. 0

    Digging into the PHP SDK code, it seems you’re supposed to send the fields as plain old JSON and definitely not double-encoded

    const formattedForApi = JSON.stringify({
  fields: {
    phone: [
      {
        type: "main",
        value: "313-555-2121",
      },
    ],
  },
});

fetch(`/item/app/${app_id}/`, {
  method: "POST",
  body: formattedForApi,
  headers: {
    authorization: `OAuth2 ${token}`,
    "content-type": "application/json",
  },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search