通过循环构建 JSON 数组答案

【问题标题】：Build JSON Array through Loop通过循环构建 JSON 数组
【发布时间】：2019-07-20 15:07:27
【问题描述】：

我正在尝试通过循环构建JSON 数组，其中input 类名和值将用作JSON obj 和键。但我无法创建一个，也找不到有关如何创建一个的信息。我在下面给出了一个示例，我需要在注释行中提供帮助，我希望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>

【问题讨论】：

您想要的{"class_1", "val_1", "class_2", 输出是无效的语法。对象需要键值对。数组与对象不同。如果你想要一个数组（只有值，没有键值对），使用数组而不是对象。
只需将: 更改为逗号即可将多个项目推送到单个.push 中的数组中
我想人们想说的是你想将一个对象推入数组中，你会这样做：json_array.push({ name: x.className.toString(), value: x.value.toString() });

标签： javascript html arrays json object

【解决方案1】：

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>

【讨论】：

没有所谓的括号表示法。
@Ele property accessors 属性访问器通过使用点符号或*括号符号来提供对对象属性的访问 .*
哎呀抱歉，我看到了别的东西……我的错！

【解决方案2】：

如果您只需要一个 JSON 对象，则必须设置键：

var json_array = {};
//...
json_array[x.className] = x.value;

【讨论】：

JSON object 在 js 世界中不存在。你的意思是js object？
@Ele：指的是输出，可以是一个对象，也可以是一组对象。

【解决方案3】：

您应该使用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>

【讨论】：

【解决方案4】：

你需要用dynamic property namespush一个对象：

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>

【讨论】：

【解决方案5】：

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

这将是Objects 的Array，输入字段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);
};

【讨论】：

最好也包含对代码的解释，而不是仅仅包含纯代码。
@JackBashford 绝对同意。我通常会先得到代码答案，然后立即更新描述。这是失礼吗？不想违反最佳实践，只是发现在这些编辑器中同时做所有事情是一团糟。
我同意，它还让您有机会试验您发布的代码（例如优化它）。

【解决方案6】：

这是否提供了您正在寻找的东西？使用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>

【讨论】：

这修复了它：json_array[x.className] = x.value