How to create a json object with input variable

Question

I want to create a JSON object with input variable. I have a 2 input field. when I click button i want to take input values and make a JSON object with that value. I cannot create a JSON object with entered value.

I try that

//getting the value of input as a variable
let id=document.querySelector("#id");
let title=document.querySelector("#title");

first I try the below. it sends a blank value instead of variable string

var vObj= '{"id":'+id.value+',"title":'+title.value+'}'

I also try that to

var vObj = {"id":{},"v_title":{}, "v_category":{}};
vObj.id=id.value;
vObj.title=title.value;

tried that

let asd=id.value;
let bsd=title.value;

var vObj = {id:asd, title:bsd}

it returns a blank value instead of variable value.

i am making a mistake that the trigger button has typo. i couldn't see that. sorry

Are you sure document.querySelector("#id").value; document.querySelector("#title").value; is returning string value? — Shashank
– Shashank, Commented Oct 30, 2019 at 12:05
Do you really want to create JSON or a JavaScript object? What do you intend to do with vObj? The term "JSON object" is a misleading term so it needs clarification. — Felix Kling
– Felix Kling, Commented Oct 30, 2019 at 12:11
So you really want to JSON. The answers you have received so far should help. Create an object and then use JSON.stringify to convert it to JSON. — Felix Kling
– Felix Kling, Commented Oct 30, 2019 at 12:24

Martin · Accepted Answer · 2019-10-30 12:15:11Z

3

You can create an object with name proeprties and then use JSON.stringify to turn this into valid JSON:

//let id = document.querySelector("#id").value;
let id = 'my_id';
//let title = document.querySelector("#title").value;
let title = 'my_title';
console.log('ID: ' + id);
console.log('Title: ' + title);

var vObj = { id: id, title: title };
var json = JSON.stringify(vObj);
console.log(json);

This line:

var vObj = { id: id, title: title };

Creates an object with an id with the value of the id variable, and a title with the value of the title variable.

This line:

var json = JSON.stringify(vObj);

Converts the object vObj to a JSON string.

Output:

ID: my_id
Title: my_title
{"id":"my_id","title":"my_title"}

Edit followimg @FelixKling comment

In ES6 it is possible to simplify the declaration of vObj using:

var vObj = {id, title};

This will create the same object with the assumed property names id and title. Obviously if your variable is not named id or title this will not work.

edited Oct 30, 2019 at 12:15

answered Oct 30, 2019 at 12:07

Martin

16.5k1 gold badge33 silver badges51 bronze badges

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

7 Comments

Felix Kling Over a year ago

FWIW, this can be written as var vobj = {id, title}; since ES6.

Martin Over a year ago

@FelixKling Thank you, a good point. Presumably that is only in cases like this where the variable name matches the object property name?

Felix Kling Over a year ago

That's right. The nice thing about it is that it can prevent typos (assuming of course the variable name is correct in the first place). E.g. {titel: title} vs {title}.

Martin Over a year ago

@FelixKling Thanks for confirming. I'll update the answer to reflect this useful change

AhuraMazda Over a year ago

i m sorry, if i want to get input value with a variable -not static value- it returns like that => { id: '', title: '' }

|

peeebeee · Accepted Answer · 2019-10-30 12:08:17Z

1

First create an object, then stringify it to JSON.

var jsonObj = JSON.stringify( { "id" : id, "title" : title } );

answered Oct 30, 2019 at 12:08

peeebeee

2,6296 gold badges24 silver badges28 bronze badges

2 Comments

AhuraMazda Over a year ago

i cannot create an object with input variable value. it returns blank like { id: ' ', title: ' ' }

peeebeee Over a year ago

Then your problem isn't with creating the object, it's with populating the input variables.

Collectives™ on Stack Overflow

How to create a json object with input variable

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related