Creating a JSON dynamically with each input value using jquery

by

Like this:

function createJSON() {
    jsonObj = [];
    $("input[class=email]").each(function() {

        var id = $(this).attr("title");
        var email = $(this).val();

        item = {}
        item ["title"] = id;
        item ["email"] = email;

        jsonObj.push(item);
    });

    console.log(jsonObj);
}

Explanation

You are looking for an array of objects. So, you create a blank array. Create an object for each input by using ‘title’ and ’email’ as keys. Then you add each of the objects to the array.

If you need a string, then do

jsonString = JSON.stringify(jsonObj);

Sample Output

[{"title":"QA","email":"a@b"},{"title":"PROD","email":"b@c"},{"title":"DEV","email":"c@d"}]

More Related Contents:

  1. Add new row in html dynamically using jQuery
  2. Parsing JSON objects for HTML table
  3. How to send a JSON object using html form data
  4. Why is it a bad practice to return generated HTML instead of JSON? Or is it?
  5. how to use json file in html code
  6. How to convert HTML to JSON using PHP?
  7. How can I use JSON data to populate the options of a select box?
  8. How to convert html table to excel with multiple sheet?
  9. Trying to load local JSON file to show data in a html page using JQuery
  10. Passing JSON data from php to html-data attribute and then to Javascript
  11. How to get the JSON with duplicate keys completely in javascript
  12. How to convert selected HTML to Json?
  13. Using JSONP to get JSON data from another server
  14. How can I get the data-id attribute?
  15. How to submit an HTML form without redirection
  16. Is there a DOM event that fires when an HTML select element is closed?
  17. How do I remove tinyMCE and then re-add it?
  18. How to ONLY trigger parent click event when a child is clicked
  19. How can I detect when a new element has been added to the document in jquery?
  20. How to read line by line of a text area HTML tag
  21. jQuery: trigger a hover event from another element
  22. send json object from javascript to php
  23. Load JSON content from a local file with http.get() in Angular 2
  24. Getting a diff of two json-objects
  25. How to use jQuery’s drop event to upload files dragged from the desktop?
  26. call the same jQuery function in multiple buttons
  27. Passing parameters to a JQuery function
  28. How do you swap DIVs on mouseover (jQuery)?
  29. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?
  30. Validate Dynamically Added Input fields

Leave a Comment