{"id":367,"date":"2020-09-22T14:13:12","date_gmt":"2020-09-22T08:43:12","guid":{"rendered":"https:\/\/wpproonline.com\/?p=367"},"modified":"2026-02-26T10:47:45","modified_gmt":"2026-02-26T10:47:45","slug":"how-to-convert-formdata-to-json-object","status":"publish","type":"post","link":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/","title":{"rendered":"HOW TO CONVERT FORMDATA TO JSON OBJECT"},"content":{"rendered":"\n

Recently, whilst working on a project I needed to take HTML FormData and then convert it to JSON to be sent off to an API. By default the FormData object does not work in the way you would want it to for JSON.<\/p>\n\n

Using the\u00a0for..of<\/em><\/strong><\/code>\u00a0syntax introduced in ECMAScript 2015, we can access the form data entries and iterate over them to get key and value pairs. This will be the verbose solution, scroll to the bottom to get the cleaner solution using\u00a0.reduce<\/em><\/strong><\/code>\u00a0below.<\/p>\n\n

<\/p>\n\n

const formData = new FormData(SomeFormElement).entries();\nlet jsonObject = {};\nfor (const [key, value]  of formData) {\n    jsonObject[key] = value;\n}<\/pre>\n\n
By calling\u00a0entries<\/em><\/strong><\/code>\u00a0on our form data object, it returns the required iterable data we can then access in the form of key and value. In our above example, we actually store each item in an object.<\/p>\n\n
Fortunately, this isn\u2019t a complicated problem to solve. If we had to do this without a\u00a0for..of<\/em><\/strong><\/code>\u00a0loop, then it wouldn\u2019t be nearly as clean as the above solution is (which can still be improved).<\/p>\n\n
Now, let\u2019s make it more readable by using\u00a0reduce<\/em><\/strong><\/code>\u00a0which can work with\u00a0.entries<\/em><\/strong><\/code>\u00a0to create our object in a slightly cleaner way.<\/p>\n\n
const formData = new FormData(SomeFormElement).entries();\nconst jsonObject = formData.reduce((acc, [key, val]) => {\n  acc[key] = val;\n  return acc;\n}, {});<\/pre>\n","protected":false},"excerpt":{"rendered":"
Recently, whilst working on a project I needed to take HTML FormData and then convert it to JSON to be sent off to an API. By default the FormData object…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[77],"tags":[152,153],"class_list":["post-367","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-json"],"yoast_head":"\nHOW TO CONVERT FORMDATA TO JSON OBJECT - DigitalHubZ<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HOW TO CONVERT FORMDATA TO JSON OBJECT\" \/>\n<meta property=\"og:description\" content=\"Recently, whilst working on a project I needed to take HTML FormData and then convert it to JSON to be sent off to an API. By default the FormData object…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/\" \/>\n<meta property=\"og:site_name\" content=\"DigitalHubZ\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-22T08:43:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T10:47:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1232\" \/>\n\t<meta property=\"og:image:height\" content=\"369\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DigitalHubZ\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DigitalHubZ\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/\"},\"author\":{\"name\":\"DigitalHubZ\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\"},\"headline\":\"HOW TO CONVERT FORMDATA TO JSON OBJECT\",\"datePublished\":\"2020-09-22T08:43:12+00:00\",\"dateModified\":\"2026-02-26T10:47:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/\"},\"wordCount\":184,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"keywords\":[\"javascript\",\"json\"],\"articleSection\":[\"Javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/\",\"name\":\"HOW TO CONVERT FORMDATA TO JSON OBJECT - DigitalHubZ\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\"},\"datePublished\":\"2020-09-22T08:43:12+00:00\",\"dateModified\":\"2026-02-26T10:47:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/how-to-convert-formdata-to-json-object\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HOW TO CONVERT FORMDATA TO JSON OBJECT\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\",\"name\":\"DigitalHubZ\",\"description\":\"Future-Ready Digital Solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\",\"name\":\"DigitalHubZ\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/digitalhubz.webp\",\"contentUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/digitalhubz.webp\",\"width\":1232,\"height\":369,\"caption\":\"DigitalHubZ\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\",\"name\":\"DigitalHubZ\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"caption\":\"DigitalHubZ\"},\"sameAs\":[\"https:\\\/\\\/digitalhubz.com\"],\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/author\\\/digi_v1_wp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HOW TO CONVERT FORMDATA TO JSON OBJECT - DigitalHubZ","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/","og_locale":"en_US","og_type":"article","og_title":"HOW TO CONVERT FORMDATA TO JSON OBJECT","og_description":"Recently, whilst working on a project I needed to take HTML FormData and then convert it to JSON to be sent off to an API. By default the FormData object…","og_url":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/","og_site_name":"DigitalHubZ","article_published_time":"2020-09-22T08:43:12+00:00","article_modified_time":"2026-02-26T10:47:45+00:00","og_image":[{"width":1232,"height":369,"url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","type":"image\/webp"}],"author":"DigitalHubZ","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DigitalHubZ","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/#article","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/"},"author":{"name":"DigitalHubZ","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873"},"headline":"HOW TO CONVERT FORMDATA TO JSON OBJECT","datePublished":"2020-09-22T08:43:12+00:00","dateModified":"2026-02-26T10:47:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/"},"wordCount":184,"commentCount":0,"publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"keywords":["javascript","json"],"articleSection":["Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/","url":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/","name":"HOW TO CONVERT FORMDATA TO JSON OBJECT - DigitalHubZ","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#website"},"datePublished":"2020-09-22T08:43:12+00:00","dateModified":"2026-02-26T10:47:45+00:00","breadcrumb":{"@id":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalhubz.com\/blog\/how-to-convert-formdata-to-json-object\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digitalhubz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HOW TO CONVERT FORMDATA TO JSON OBJECT"}]},{"@type":"WebSite","@id":"https:\/\/www.digitalhubz.com\/blog\/#website","url":"https:\/\/www.digitalhubz.com\/blog\/","name":"DigitalHubZ","description":"Future-Ready Digital Solutions","publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digitalhubz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.digitalhubz.com\/blog\/#organization","name":"DigitalHubZ","url":"https:\/\/www.digitalhubz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","contentUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","width":1232,"height":369,"caption":"DigitalHubZ"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873","name":"DigitalHubZ","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","caption":"DigitalHubZ"},"sameAs":["https:\/\/digitalhubz.com"],"url":"https:\/\/www.digitalhubz.com\/blog\/author\/digi_v1_wp\/"}]}},"_links":{"self":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":4,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/367\/revisions"}],"predecessor-version":[{"id":54859,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/367\/revisions\/54859"}],"wp:attachment":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media?parent=367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/categories?post=367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/tags?post=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}