我正在尝试通过循环构建一个JSON
数组,其中input
className和value将用作JSON
obj和key。但我无法创建一个,也无法找到有关如何创建一个的信息。我在下面给出了一个示例,我在评论行中需要帮助,我希望console.log(json_array);
返回{"class_1":"val_1", "class_2":"val_2", "class_3":"val_3", "class_4":"val_4", "class_5":"val_5"}
。我怎样才能像这样生成JSON
数组?通过这种方法甚至可以制作一个JSON
阵列?
document.querySelector("button").onclick = function() {
var json_array = [];
document.querySelectorAll("div input").forEach(x => {
json_array.push(x.className.toString() : x.value.toString()); // DOESN'T WORK
});
console.log(json_array);
};
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div>
<input type="text" class="class_1" value="val_1">
<input type="text" class="class_2" value="val_2">
<input type="text" class="class_3" value="val_3">
<input type="text" class="class_4" value="val_4">
<input type="text" class="class_5" value="val_5">
</div>
<button>BUILD</button>
</body>
</html>
Object
没有push
,这是一个数组函数,你需要使用括号表示法添加键:json_array[x.className] = x.value
document.querySelector("button").onclick = function() {
var json_array = {};
document.querySelectorAll("div input").forEach(x => {
json_array[x.className] = x.value
});
console.log(json_array);
};
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div>
<input type="text" class="class_1" value="val_1">
<input type="text" class="class_2" value="val_2">
<input type="text" class="class_3" value="val_3">
<input type="text" class="class_4" value="val_4">
<input type="text" class="class_5" value="val_5">
</div>
<button>BUILD</button>
</body>
</html>
如果只需要一个JSON对象,则必须设置键:
var json_array = {};
//...
json_array[x.className] = x.value;
您应该使用computed-property-names
,您应该将键值对{[x.className.toString()] : x.value.toString()}
包装如下:
document.querySelector("button").onclick = function() {
var json_array = [];
document.querySelectorAll("div input").forEach(x => {
json_array.push({[x.className.toString()] : x.value.toString()}); // DOESN'T WORK
// ^^^^^^^^^^^^^^^^^^^^^^^^
});
console.log(json_array);
};
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div>
<input type="text" class="class_1" value="val_1">
<input type="text" class="class_2" value="val_2">
<input type="text" class="class_3" value="val_3">
<input type="text" class="class_4" value="val_4">
<input type="text" class="class_5" value="val_5">
</div>
<button>BUILD</button>
</body>
</html>
你需要push
与dynamic property names对象:
json_array.push({[x.className.toString()]: x.value.toString()});
示范:
document.querySelector("button").onclick = function() {
var json_array = [];
document.querySelectorAll("div input").forEach(x => {
json_array.push({
[x.className.toString()]: x.value.toString()
});
console.log(json_array);
};
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div>
<input type="text" class="class_1" value="val_1">
<input type="text" class="class_2" value="val_2">
<input type="text" class="class_3" value="val_3">
<input type="text" class="class_4" value="val_4">
<input type="text" class="class_5" value="val_5">
</div>
<button>BUILD</button>
</body>
</html>
但是,如果需要对象,请使用括号表示法添加属性:
document.querySelector("button").onclick = function() {
var json_array = {};
document.querySelectorAll("div input").forEach(x => {
json_array[x.className.toString()] = x.value.toString();
});
console.log(json_array);
};
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div>
<input type="text" class="class_1" value="val_1">
<input type="text" class="class_2" value="val_2">
<input type="text" class="class_3" value="val_3">
<input type="text" class="class_4" value="val_4">
<input type="text" class="class_5" value="val_5">
</div>
<button>BUILD</button>
</body>
</html>
document.querySelector("button").onclick = function() {
var json_array = [];
document.querySelectorAll("div input").forEach(x => {
json_array.push({x.className.toString() : x.value.toString())}); // DOESN'T WORK
});
console.log(json_array);
};
我想这里的每个人都在试图猜测你想要的结果的具体形状,因为你提出的建议没有意义,原因有几个。我猜你真正想要的是这个......
[
{"class_1":"val_1"},
{"class_2":"val_2"},
{"class_3":"val_3"},
{"class_4":"val_4"},
{"class_5":"val_5"}
]
这将是Array的Objects,输入字段className
作为对象的键,输入value
作为键值。如果您正在尝试实现其他目标,请告诉我。
如果您实际需要的是单个Object,输入字段className
作为键,输入value
作为键值,就像这样......
{
"class_1": "val_1",
"class_2": "val_2",
"class_3": "val_3",
"class_4": "val_4",
"class_5": "val_5"
}
那你就是这样做的......
document.querySelector("button").onclick = function() {
var js_obj = {};
document.querySelectorAll("div input").forEach(x => {
var className = x.className.toString(),
value = x.value.toString();
js_obj[className] = value;
});
console.log(js_obj);
};
这是否能满足您的需求?使用Array.map
转换元素集合。根据Ele对计算属性的建议进行调整
document.querySelector("button").onclick = function() {
let arr = Array.from(document.querySelectorAll("div input")).map(x => {
return {[x.className] : x.value};
});
console.log(arr);
};
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div>
<input type="text" class="class_1" value="val_1">
<input type="text" class="class_2" value="val_2">
<input type="text" class="class_3" value="val_3">
<input type="text" class="class_4" value="val_4">
<input type="text" class="class_5" value="val_5">
</div>
<button>BUILD</button>
</body>
</html>