如何使用输入变量创建json对象

Question

我想创建一个带有输入变量的JSON对象。我有一个2输入字段。当我点击按钮时，我想获取输入值，并用该值创建一个JSON对象。我无法使用输入的值创建JSON对象。

我试试

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

首先我试试下面的。它发送一个空白值，而不是变量字符串

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

我也尝试过

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

试过

let asd=id.value;
let bsd=title.value;
var vObj = {id:asd, title:bsd}

它返回一个空白值，而不是变量值。

我犯了一个错误，触发按钮有错别字。我看不出来。抱歉

Answer 1

您可以创建一个名为proepries的对象，然后使用JSON.stringify将其转换为有效的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);

此行：

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

创建一个对象，其中id和id变量的值，title和title变量的值。

此行：

var json = JSON.stringify(vObj);

将对象vObj转换为JSON字符串。

输出：

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

编辑以下IMG@FelixKling评论

在ES6中，可以使用简化vObj的声明

var vObj = {id, title};

这将创建具有假定属性名称id和title的相同对象。显然，如果您的变量没有命名为id或title，这将不起作用。

Answer 2

首先创建一个对象，然后将其字符串化为JSON。

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