Creating a JSON dynamically with each input value using jQuery

Input -> object -> array -> JSON

Let's kick it up a notch - Fast answer just gave us an overview of a simple JSON object creation. Now, let's head into the more complex terrain: building a JSON array with multiple inputs.

Grouping inputs into an object array

When dealing with a cluster of inputs such as items in a list, an array of objects might be what you need:

let jsonArray = []; // A fresh, empty JSON array
$('.email').each(function() {
    let item = {
        title: $(this).attr('data-title'), // Note: You can use custom attributes for extra info
        email: $(this).val()
    };
    jsonArray.push(item); // And.. 'push' to the array
});
console.log(JSON.stringify(jsonArray)); // Presto! An array bottled into a string


Ensure your inputs have a distinguishing class or other selectors and potentially a data attribute for extra properties.

Creating JSON with dynamic keys

Okay, enough static - Let's get dynamic! If your inputs have a dynamic or custom name attribute, let's make our JSON dance to its tune:

$('input').on('change', function() {
    let dynamicJSON = {}; // Aha! Our dynamic marvel begins
    $('input').each(function() {
        let key = $(this).data('key') || $(this).attr('name'); // The key is "key" or defaults to the "name"
        dynamicJSON[key] = $(this).val();
    });
    console.log(dynamicJSON); // Unleash the dynamic JSON to console
});


In this approach, we utilize data-key attributes, providing a flexible key-definition to our JSON dance💃.

Going beyond jQuery - pure JavaScript and others

Jumping off the jQuery train

Despite its comfort and ease, there may be cases where vanilla JavaScript offers better performance. Here's our JSON dance without jQuery's help:

var jsonResult = {};
document.querySelectorAll('input').forEach(input => {
    jsonResult[input.name] = input.value; // Hello from the 'Vanilla' side
});
console.log(jsonResult); // Pure, tasty vanilla flavoured JSON!


Encountering aged browsers

If your application relies on modern browser features, remember to ensure fallbacks for older versions or alarm users about the minimum requirements.

JSON mishaps on older browsers

Some older browsers might not be familiar with JSON.stringify(). In such cases, bring in a JSON library or consider polyfills.

Debugging & validating your JSON masterpiece

Before your dynamic JSON steps onto the stage, ensure to use console.log or similar debugging tools to verify and validate your output. After all, everyone loves bug-free and valid JSON. Imagine JSON as a stage actor. It’d be a shame if it forgot its lines during the performance!