Having issues with Json stringification and serializing arrays

Question

Having issues with Json stringification and serializing arrays

Having an issue with Json when using serializeArray.

An example of my HTML form:

<form action="" method="post" name="myForm">
ID: <input type="text" name="id" /><br/>
State (XX): <input type="text" name="state" /><br/>
<p><input type="submit" onClick='submitform()' /></p>
</form>

This is the javascript I'm using:

function submitform() {
var formData = JSON.stringify($("form[name*='myForm']").serializeArray());
alert(formData);

The alert displays data in name value pairs like:

[{"name":"id","value":"1234"},{"name":"state","value":"CA"}]

I want the output to be: {"id":"1234","state":"CA"}

Any suggestions on how to achieve this?

javascript html json serialization forms

Answer 1

Answer №1

There are plenty of existing posts on this topic at stackoverflow

Converting form data to JSON


    $.fn.serializeData = function() {
        var obj = {};
        var arr = this.serializeArray();
        $.each(arr, function() {
            if (obj[this.name]) {
                if (!obj[this.name].push) {
                    obj[this.name] = [obj[this.name]];
                }
                obj[this.name].push(this.value || '');
            } else {
                obj[this.name] = this.value || '';
            }
        });
        return obj;
    };

Answer 2

There are plenty of existing posts on this topic at stackoverflow

Converting form data to JSON


    $.fn.serializeData = function() {
        var obj = {};
        var arr = this.serializeArray();
        $.each(arr, function() {
            if (obj[this.name]) {
                if (!obj[this.name].push) {
                    obj[this.name] = [obj[this.name]];
                }
                obj[this.name].push(this.value || '');
            } else {
                obj[this.name] = this.value || '';
            }
        });
        return obj;
    };

Having issues with Json stringification and serializing arrays

Answer №1

Similar questions

Using Angular JS version 1.2.26 to implement promises within a forEach iteration

Guide to smoothly scroll to a specific Label using GSAP's scrollTrigger and scrubbing within a Timeline

What is the best way to create a header similar to the one in the image using only CSS

Error: Encountered an unexpected token while trying to parse multiple form functions

Using Java to extract data from a JSON file containing dynamic fields

Tips for efficiently serving a static file without triggering a disk read

incorporating video content onto a webpage

What is the best way to locate the nearest marker using the Google Maps Direction Service?

Bower consistently installs the most up-to-date version instead of the version that was explicitly specified

When a table cell is hovered over, a left border will be added

What is the best way to obtain the SearchIDs for various searchNames using JavaScript?

Is there a way to invoke a class method from the HTML that is specified within its constructor function?

Tips on arranging jQuery deferred objects in order?

Invalid file format for product images in Magento version 1.9.0.1

In Google Chrome, the input types for email, URL, and search feature a thin 1px padding on the left and right sides

Eliminating empty elements in json documents within a MongoDB database

Creating dynamic flags with specific parameters using Pentaho and JavaScript

Changing the format of JSON output in Laravel

The digest string for the crypto.pbkdf2Sync function is malfunctioning

The error message reads: `json.decoder.JSONDecodeError: Unexpected additional data present at line 2, starting from column 1 (character