Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to append an object?

See original GitHub issue

Hello need to append object field something like:

var form = new FormData();
form.append('name', 'Name');
form.append('details', {age: 12});

but it will throw an error like this:

      TypeError: Object #<Object> has no method 'on'

      at Function.DelayedStream.create (/home/pity/workspace/node_modules/cmp-uploaders/node_modules/combined-stream/node_modules/delayed-stream/lib/delayed_stream.js:33:10)
      at FormData.CombinedStream.append (/home/pity/workspace/node_modules/cmp-uploaders/node_modules/combined-stream/lib/combined_stream.js:43:37)
      at FormData.append (/home/pity/workspace/node_modules/cmp-uploaders/node_modules/form-data/lib/form_data.js:43:3)
      at validationFailTest (/home/pity/workspace/node_modules/cmp-uploaders/test/lab/simple_uploader.js:68:6)
      at Object._onImmediate (/home/pity/workspace/node_modules/cmp-uploaders/node_modules/lab/lib/execute.js:492:17)
      at processImmediate [as _immediateCallback] (timers.js:330:15)

Issue Analytics

State:
Created 9 years ago
Comments:16 (3 by maintainers)

Top GitHub Comments

117reactions

alexindigocommented, Dec 3, 2014

Hey,

The thing is you can send only strings over the wire, so complex data types, like object should be encoded somehow and since there are many way to encode objects, FormData leaves it to developer to choose proper encoding mechanism that supported on the other end. For example it could be a JSON string or a form-urlencoded string.

Something like:

var details = JSON.stringify({age: 12});
form.append('details', details);

Let me know if you have more questions.

22reactions

alexsmartenscommented, Feb 14, 2021

I was trying to post a complex data structure without pickling it into json to set up a simple data flow from React to Rails, and this thread was the most helpful piece of information. Just in case someone is looking for an example:

data to be posted:

{
  library: "favorite",
  movie: {
    name: "James Bond Skyfall",
    year: "2012",
    screenshots: [file1, file2],
  },
}

implementation with FormData:

const formData = new FormData()

formData.append("library", "favorite")
formData.append("movie[name]", "James Bond Skyfall")
formData.append("movie[year]", "2012")

formData.append("movie[screenshots][]", file1)
formData.append("movie[screenshots][]", file2)

Top Results From Across the Web

Appending to an object - javascript

You can do this with Object.assign(). Sometimes you need an array, but when working with functions that expect a single JSON object --...

How to Append Values to Object in JavaScript

The Object.assign() method appending values to objects by key/value pairs. The push() method adds one or multiple values into an array. However, the...

JavaScript append new elements to an object

When you need to append new elements to your JavaScript object variable, you can use either the Object.assign() method or the spread operator....

Append Values to Object in JavaScript

Use the object.assign() Method to Append Elements to Objects in JavaScript ... The object.assign() method will copy all properties defined in an ...

JavaScript Program to Append an Object to An Array

In the above program, the push() method is used to add an object to an array. The push() method adds an item to...