Creating a Json Dynamically With Each Input Value Using Jquery

Creating a JSON dynamically with each input value using jquery

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"}] 

how to Creating JSON each input value using jquery

I am getting ERROR:

Uncaught ReferenceError: input is not defined

you need to wrap each input in your selector with ' or ":

var firstname = $('input[name=frstname]').val();
var lastname  = $('input[name=lastname]').val();
var gender    = $('input[name=gender]').val();
var dob       = $('input[name=dob]').val();
var email     = $('input[name=email]').val();

the same what you did here:

$("input[data-conv=json]").each(function() {

Though if you have 1 forum with these controls you dont need the each:-

$(document).ready(function(){
    $('.btn-action').on('click', function(){

        var jsonObj = [];

        var firstname = $('input[name=frstname]').val();
        var lastname  = $('input[name=lastname]').val();
        var gender    = $('input[name=gender]').val();
        var dob       = $('input[name=dob]').val();
        var email     = $('input[name=email]').val();

        item = {}
        item ['firstname']  = firstname;
        item ['lastname']   = lastname;
        item ['gender']     = gender;
        item ['dob']        = dob;
        item ["email"]      = email;

        jsonObj.push(item);

        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

but if you have multiples you need to give the group arround the elements a class:-

<div class="form-group inputs-group">
        <input type="text" class="form-control" name="frstname" data-conv="json">
        <input type="text" class="form-control" name="lastname" data-conv="json">

then each over that using find:

$(document).ready(function(){
    $('.btn-action').on('click', function(){

        var jsonObj = [];
        $(".inputs-group").each(function() {
            var firstname = $(this).find('input[name=frstname]').val();
            var lastname  = $(this).find('input[name=lastname]').val();
            var gender    = $(this).find('input[name=gender]').val();
            var dob       = $(this).find('input[name=dob]').val();
            var email     = $(this).find('input[name=email]').val();

            item = {}
            item ['firstname']  = firstname;
            item ['lastname']   = lastname;
            item ['gender']     = gender;
            item ['dob']        = dob;
            item ["email"]      = email;

            jsonObj.push(item);
        });
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

Create JSON object dynamically via Jquery

Please find the link below :
https://jsfiddle.net/ulric_469/5986mpxd/31/

<select class="awe-select" name="rooms" id="rooms">                                         
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
 </select>
 <div class= "temp" id ="textboxDiv">

 </div>
 <button class="awe-btn-default submit" type="submit">BOOK </button>

JS:

$(document).ready(function() {
    $("#rooms").change(function() {
        var selVal = $(this).val();
        $("#textboxDiv").html("");
        if(selVal > 0) {
            for(var i = 1; i<= selVal; i++) {
                $("#textboxDiv").append("<div class='check_availability_group'><span class='label-group'>ROOM </span><div class='check_availability-field_group'><div class='check_availability-field'><label>Adult</label><select name='adult' id='adult' class='form-control activeInput' required><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></div><div class='check_availability-field'><label>Children</label><select class='form-control activeInput' id='children' name='children' required><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option  value='4'>4</option><option value='5'>5</option></select></div></div></div>");
            }
        }
    });

    $(".submit").click(function() {
    var array = [];     
$(".check_availability-field_group").each(function() {
    array.push({
        adult: +$(this).find("select[name= 'adult']").val(),
        children: +$(this).find("select[name= 'children']").val()
    });
});
var jsonString = JSON.stringify(array);
    console.log(jsonString)
});

});

Add dynamically generated input fields into a JSON object with JQuery

See the updated fiddle http://jsfiddle.net/9Lhpo8pL/21/
There was a couple of things:

1. The data attribute should be addressed like this
   $(this).data('name') instead of $(this).emailData('name')
2. 'send' is an ID, not a class
3. The text area has #output id, not #result

Creating a JSON dynamically using Dictionary key value

The following script will get you the required string (the keys are surrounded by double quotes, but otherwise it is exactly what you wanted):

const data={
  mo: '#2980b9',
  fl: '#27ae60',
  or: '#8e44ad'
}
let res="var highlighted_color = "+JSON.stringify(data,null,2);
console.log(res);

function onGeneratedRow(columnsResult)
{
    var jsonData = {};
    columnsResult.forEach(function(column) 
    {
        var columnName = column.metadata.colName;
        jsonData[columnName] = column.value;
    });
    viewData.employees.push(jsonData);
 }

var importParameters = $('#divImportOptions .ace').map(function() {  return { [this.id]: this.checked };                }).get();
console.log(importParameters);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="divImportOptions">  <input type="checkbox" id="foo" class="ace" value="A" checked="true" />  <input type="checkbox" id="bar" class="ace" value="B" />  <input type="checkbox" id="fizz" class="ace" value="C" checked= "true" />  <input type="checkbox" id="buzz" class="ace" value="D" /></div>