Creating a JSON dynamically with each input value using jquery

Question

I got a situation where I would like to read some data off a JSON format through PHP, however I am having some issues understanding how I should construct the Javascript object to create the JSON format dynamically.

My scenario is as follows:

<input title="QA" type="text" class="email">
<input title="PROD" type="text" class="email">
<input title="DEV" type="text" class="email">

The Javascript code I have so far goes through each input grabs the data, I am however unable to understand how to process from here on.

var taskArray = {};

$("input[class=email]").each(function() {
  var id = $(this).attr("title");
  var email = $(this).val();

  //how to create JSON?

});

I would like to get the following output if possible.

[{title: QA, email: '[email protected]'}, {title: PROD, email: '[email protected]'},{title: DEV, email: '[email protected]'}]

Where the email is acquired by the input field value.

ATOzTOA · Accepted Answer · 2013-02-21 18:23:27Z

308

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

answered Feb 21, 2013 at 18:23

ATOzTOA

36.1k23 gold badges101 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gino Over a year ago

Why to in these 3 examples i alway get this? 'Uncaught ReferenceError: jsonObj is not defined'

ATOzTOA Over a year ago

@Gino Did you copy paste or type? See the line which defines jsonObj.

ChrisF · Accepted Answer · 2013-04-23 12:52:58Z

20

I don't think you can turn JavaScript objects into JSON strings using only jQuery, assuming you need the JSON string as output.

Depending on the browsers you are targeting, you can use the JSON.stringify function to produce JSON strings.

See http://www.json.org/js.html for more information, there you can also find a JSON parser for older browsers that don't support the JSON object natively.

In your case:

var array = [];
$("input[class=email]").each(function() {
    array.push({
        title: $(this).attr("title"),
        email: $(this).val()
    });
});
// then to get the JSON string
var jsonString = JSON.stringify(array);

edited Apr 23, 2013 at 12:52

answered Feb 21, 2013 at 18:28

ChrisF

8559 silver badges9 bronze badges

Comments

Salman · Accepted Answer · 2013-02-22 07:27:32Z

11

May be this will help, I'd prefer pure JS wherever possible, it improves the performance drastically as you won't have lots of JQuery function calls.

var obj = [];
var elems = $("input[class=email]");

for (i = 0; i < elems.length; i += 1) {
    var id = this.getAttribute('title');
    var email = this.value;
    tmp = {
        'title': id,
        'email': email
    };

    obj.push(tmp);
}

edited Feb 22, 2013 at 7:27

answered Feb 21, 2013 at 18:20

Salman

9,4676 gold badges42 silver badges74 bronze badges

1 Comment

Bobadevv Over a year ago

Big + 1 went with this solution the accepted answer caused me some issues in IE

Pravin Bansal · Accepted Answer · 2019-12-28 19:33:25Z

1

same from above example - if you are just looking for json (not an array of object) just use

function getJsonDetails() {
      item = {}
      item ["token1"] = token1val;
      item ["token2"] = token1val;
      return item;
}
console.log(JSON.stringify(getJsonDetails()))

this output ll print as (a valid json)

{ 
   "token1":"samplevalue1",
   "token2":"samplevalue2"
}

answered Dec 28, 2019 at 19:33

Pravin Bansal

4,7291 gold badge33 silver badges20 bronze badges

Comments

Walk · Accepted Answer · 2022-08-23 14:11:12Z

0

I tried this:

// Sample JS object
var varobject = {
  name: "Name", 
  Intern: "Test", 
};

// Converting JS object to JSON string
JSON.stringify(varobject);

answered Aug 23, 2022 at 14:11

Walk

1,65721 silver badges23 bronze badges

Collectives™ on Stack Overflow

Creating a JSON dynamically with each input value using jquery

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related