Question

我是JavaScript和查询的初学者。我有一个HTML表单，用户可以在其中添加或删除一组字段。字段组包含1个选择和3个输入。添加的字段组与先前字段的名称相同，依此类推。我想做的就是检索创建这样的结构的值。

{
    "colture1": [{
        "code_app": "A2",
        "long": "1",
        "lat": "103"
    }, {
        "code_app": "B34",
        "long": "11",
        "lat": "12"
    }],
    "colture2": [{
        "code_app": "GH3456",
        "long": "55",
        "lat": "90"
    }]
    // ....and so on
}

如果用户选择对象中已经存在的colture，那么我想在“ colture1”中看到的相同键中添加其他值。我的问题在这里，我无法创建可以在其中添加其他值的数组，现在我的函数将覆盖先前的值，它会写入最后一个值，并且不会创建数组。

这是我的职责

$('#create_json').on("click", function(e) {

  const json_data = {};
  var cat = "";
  for (const input of document.querySelectorAll(".card[mainBlock] select, .card[mainBlock] input")) {
    if (input.tagName === 'SELECT') {
      cat = input.value;
    } else {
      (json_data[cat] = json_data[cat] || {})[input.name] = input.value;
    }
  }
  console.log(JSON.stringify(json_data));
})

在这里我可以在https://jsfiddle.net/ou7h4f2m/3/放置一个演示。预先谢谢你

Answer 1

如果您在每次外部循环迭代中处理一个部分（仅在.card[mainBlock]上，然后使用内部循环来处理类别和属性，则可能会更容易：

$('#create_json').on("click", function (e) { 
    const data = {};
    for (const section of document.querySelectorAll(".card[mainBlock]")) {
        const cat = section.querySelector("select").value;
        const obj = Object.assign(...Array.from(section.querySelectorAll("input"), input =>
            ({ [input.name]: input.value })
        ));
        (data[cat] = data[cat] || []).push(obj);
    }
    console.log(JSON.stringify(data));
});

我不会调用您的主变量json_data。它不代表JSON，而是一个JavaScript对象。调用JSON.stringify即可获得JSON。

如果密钥已经存在，如何创建对象的json数组

1 个答案: