javascript - 如何修改我的 JSON 对象?

标签 javascript jquery html json

这是我的 JSFiddle

单击“+”按钮时,将克隆并动态附加边框表单元素。

“保存规则”按钮生成表单字段标签和值的 JSON 对象。 这是单击“保存规则”按钮时创建的 JSON 对象。

{
        "nameRules": "",
        "typeRules": "Type1",
        "descriptionRules": "XYZ\n                    ",
        "elhs": "",
        "op": "<=",
        "erhs": "",
        "datatype": "",
        "joinop0": "",
        "elhs0": "",
        "op0": "",
        "erhs0": "",
        "datatype0": ""
    }

如何让它创建以下格式的 JSON 对象?

{
    "nameRules": "",
    "typeRules": "Type1",
    "descriptionRules": "XYZ\n                    ",
    "expressions": [{
                 "elhs": "",
                 "op": "<=",
                 "erhs": "",
                 "datatype": ""
                  },
                 {
                 "joinop0": "",
                 "elhs0": "",
                 "op0": "",
                 "erhs0": "",
                 "datatype0": ""
                 }]
}

任何帮助将不胜感激。 谢谢

最佳答案

嗯,代码可能不太漂亮,因为我不是 jquery 专家,但它应该按预期工作:FIDDLE

  $('button.btn:contains("Save Rules")').on('click', function(e) {
  console.log('hhh', $('form.form-horizontal#rules').find(':input:not(button):not(#joinop)').get());
    var jsonData = $('form.form-horizontal#rules')
      .find(':input:not(button):not(#joinop)').get()
      .reduce(function(acc, ele) {
        acc.expressions = acc.expressions||[];
        if (ele.closest( "#container" ) || ele.closest('.parent-border')) {
          if (ele.closest('.parent-border')) var i = 0;
          else var i = $( "#container .child-border" ).index( ele.closest( ".child-border" )) +1
          acc.expressions[i] = acc.expressions[i]||{};
          acc.expressions[i][ele.name || ele.id] = ele.value;
        }
        else acc[ele.name || ele.id] = ele.value;
        return acc;
      }, {});
    console.log(jsonData);
    alert(JSON.stringify(jsonData, null, 4));
  });

关于javascript - 如何修改我的 JSON 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44280218/

相关文章:

javascript - 在 javascript 中按项目的属性过滤列表

javascript - 像幻灯片一样的内容 slider

javascript - 如何在 JQuery 中的同一 <tr> 内从另一个 <td> 引用一个 <td>?

jQuery - 从与旧圈子相同的位置开始新圈子扩展

html - 语义标记翻译

html - 具有透明背景和伪元素的 CSS box-shadow

javascript - D3.js - 格式化数字 - 引发错误

javascript - 如何使用 JQuery 删除第四个 div 标签并将其替换为您自己的内容?

jquery - 调整大小时的图像流 slider 图像宽度和大小

javascript - 页面行为修改谷歌浏览器扩展?