通过循环构建JSON数组

问题描述 投票:1回答:6

我正在尝试通过循环构建一个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>
javascript html arrays json object
6个回答
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>

1
投票

如果只需要一个JSON对象,则必须设置键:

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

0
投票

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

0
投票

你需要pushdynamic 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>

0
投票
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"}
]

这将是ArrayObjects,输入字段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);
};

0
投票

这是否能满足您的需求?使用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>
© www.soinside.com 2019 - 2024. All rights reserved.