使用 JavaScript 创建动态创建字段的 JSON 对象数组答案

【问题标题】：Creating an Array of JSON Objects of Dynamically Created Fields using JavaScript使用 JavaScript 创建动态创建字段的 JSON 对象数组
【发布时间】：2022-01-03 16:00:58
【问题描述】：

这里是动态生成的字段。为了简单起见，我删除了不必要的代码请帮我在单击按钮时生成一个 JSON 对象数组

<div class="row sertile">
                          
              <input type="hidden" class="form-control parType" value="Service">
              <input type="hidden" class="form-control id" value="144">
              <input type="hidden" class="form-control serviceName" value="Full face">
              <input type="hidden" class="form-control mrp" value="200">
              <input type="hidden" class="form-control dis" value="0">
              <input type="hidden" class="form-control dur" value="30">

  </div>

<div class="row sertile">
                          
              <input type="hidden" class="form-control parType" value="Service">
              <input type="hidden" class="form-control id" value="124">
              <input type="hidden" class="form-control serviceName" value="Half face">
              <input type="hidden" class="form-control mrp" value="200">
              <input type="hidden" class="form-control dis" value="0">
              <input type="hidden" class="form-control dur" value="30">

  </div>

我需要输出为：

[
 {
  parType: 'Service', 
  id: 144,
  serviceName: 'Full Face',
  ...
 }, 
 {
  parType: 'Service', 
  id: 124,
  serviceName: 'Half Face',
  ...
 },
 ...
]

【问题讨论】：

JSON 是一种用于数据交换的文本符号。 (More here.) 如果您正在处理 JavaScript 源代码，而不是处理 string，那么您就不是在处理 JSON。
嗨！请拿起tour（你会得到一个徽章！）并通读help center，尤其是How do I ask a good question?你最好的选择是做你的研究，search关于SO和其他地方的相关主题，然后给它去吧。如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境，请发布minimal reproducible example 展示您的尝试并具体说明您遇到的问题。人们会很乐意提供帮助。
感谢您的帮助。我知道如何解决它。
请注意，HTML 无效。您不能在多个元素上使用相同的 ID。改用一个类。
是的，元素已经有类而不是 id。

标签： javascript arrays json object

【解决方案1】：

您尝试过使用Element.getElementsByClassName() 吗？

一个想法可能是在您的 div 中添加一个标签，并通过文档上的getElementsByClassName 获取它们，然后遍历它们以通过其类获取每个字段并将其添加到一个对象中，然后如果需要，您可以将其转换为字符串 json

【讨论】：

你的回答没有错，他可以尝试使用Element.getElementsByClassName()，但是如果他从来没有使用过或者不知道它是如何工作的，他怎么实现呢？您应该提供一个简单的示例，以便询问的人知道如何实施，或者至少有一个更好的起点

【解决方案2】：

我找到了解决这个问题的方法。谢谢大家的帮助。

        function createJSON() {
          jsonObj = [];
          $(".sertile").each(function() {

            var id = $(this).find("#serId").val();
            var name = $(this).find("#serName").val();

            item = {}
            item["title"] = id;
            item["email"] = name;

            jsonObj.push(item);
          });

          console.log(jsonObj);
        }

【讨论】：

是的——但要注意代码正在创建我所说的implicit global。声明jsonObj。另外，由于它不是 JSON，我建议不要称它为 jsonObj。最后，您还可以使用map 来执行此操作：const result = $(".sertile").get().map(element => ( const title = $(element).find(".serId").val(); const email = $(element).find(".serName").val(); return {title, email};);（我在那里使用了类选择器，而不是 ID 选择器，因为this。）
@T.J.Crowder 感谢您提供宝贵的信息。您的详细信息确实帮助我以正确的方式做事。太谢谢你了，兄弟。 ))