从 html 输入文本和标签获取 JSON 对象中的值

Posted 2023-02-22

【中文标题】从 html 输入文本和标签获取 JSON 对象中的值

【英文标题】：Get values in JSON object from html input text and label

【发布时间】：2018-05-24 15:04:31

【问题描述】：

我有一个 html，目前通过它获取数组中循环中 input 元素的值。

但现在我想在带有标签的 json 对象中使用它。

下面是我的html：-

<div class="vendorDaterow">
    <div class="vendorName" id="dvVendorNameData">
        <label>SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName"/></span>
    </div>
    <div class="vendorFromDate">
        <label>From Date</label>
        <span class="datepicker">
        <input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass"/>
        <i class="fa fa-calendar" aria-hidden="true"></i>
        </span>
    </div>
    <div class="vendorToDate">
        <label>To Date</label>
        <span class="datepicker">
            <input type="text" value="" name="spToDate" id="spToDate" class="dateClass1"/>
            <i class="fa fa-calendar" aria-hidden="true"></i>
        </span>
    </div>
</div>

和我的 js 一样

var arrVendorValues;
    arrVendorValues = []
    $(".vendorDaterow input").each(function () 
        var text = $(this).val();
        if (text) 
            arrVendorValues.push(text);
        
    )

我想要的输出是这样的

供应商名称：ABC，ToDate：10/10/2010，FromDate：11/11/2017 供应商名称：XYZ，ToDate：10/10/2010，FromDate：11/11/2017 供应商名称：AAA，ToDate：10/10/2010，FromDate：11/11/2017

【问题讨论】：

您可能需要一个对象（注意，不是 JSON 对象，因为这样的东西不存在），而不是一个数组 - 然后您在对象上使用 JSON.stringify 来制作它转换成 JSON - 这是一个字符串

@JaromandaX：是的，你说得对。那我该怎么做。我还希望label 和input 值也在循环中。我应该如何进行

【参考方案1】：

请在标签中添加for 属性并对其进行迭代

HTML

<div class="vendorDaterow">
  <div class="vendorName" id="dvVendorNameData">
    <label for="txtVendorName" class="text-label">SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName"/></span>
  </div>
  <div class="vendorFromDate">
    <label class="text-label" for="spFromDate">From Date</label>
    <span class="datepicker">
        <input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass"/>
        <i class="fa fa-calendar" aria-hidden="true"></i>
        </span>
  </div>
  <div class="vendorToDate">
    <label class="text-label" for="spToDate">To Date</label>
    <span class="datepicker">
            <input type="text" value="" name="spToDate" id="spToDate" class="dateClass1"/>
            <i class="fa fa-calendar" aria-hidden="true"></i>
        </span>
  </div>
</div>

JS

$(document).ready(function() 
  var arrVendorValues = [];

  $(".text-label").each(function() 

    var key = $(this).text();
    var value = $("#" + $(this).attr('for')).val();
    arrVendorValues.push(
      key: key,
      value: value
    )
  )

  console.log(arrVendorValues)
);

如果你需要它作为独立功能

function getInputsAsJSON() 
  var arrVendorValues = [];
  $(".text-label").each(function() 

    var key = $(this).text();
    var value = $("#" + $(this).attr('for')).val();
    arrVendorValues.push(
      key: key,
      value: value
    )
  );
  return arrVendorValues;

您可以根据您的要求在一些click 中触发它。

【参考方案2】：

您需要创建 JSON 对象数组。然后检查输入元素的类。

var arrVendorValues = [];
function generateData()
  $(".vendorDaterow").each(function () 
    var allInputs = $(this).find("input");
    var objectToAdd = ;
    for(var i = 0; i < allInputs.length; i++)
      if(allInputs[i].name == "nmVendorData")
        objectToAdd["VendorName"] = allInputs[i].value; 
      
      else if(allInputs[i].name == "spFromDate")
        objectToAdd["ToDate"] = allInputs[i].value;
      
      else if(allInputs[i].name == "spToDate")
        objectToAdd["FromDate"] = allInputs[i].value;
      
    
    arrVendorValues.push(objectToAdd);
  );
  console.log(arrVendorValues);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vendorDaterow">
                                        <div class="vendorName" id="dvVendorNameData">
                                            <label>SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName" /></span>
                                        </div>
                                        <div class="vendorFromDate">
                                            <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                        <div class="vendorToDate">
                                            <label>To Date</label><span class="datepicker"><input type="text" value="" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                    
<button onclick="generateData();">Generate Data</button>                                    

【讨论】：

得到 object object 。如何获取值

最初所有的输入都是空的。要么在代码中设置值，要么将上面的代码包装在函数中，然后在单击按钮或填充输入框值后调用它。

【参考方案3】：

使用 filter() 从集合中删除空对象，使用 map() 创建数组

var data = $('.vendorDaterow input').filter(function()
  return this.value;// filter out empty values
).map(function()
  var label = $(this).closest('div').find('label').text(),
        o =;
  o[label] = this.value;
  return o;
).get()

console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vendorDaterow">
  <div class="vendorName" id="dvVendorNameData">
    <label>SP Vender Name</label><span><input type="text" value="123" name="nmVendorData" id="txtVendorName" /></span>
  </div>
  <div class="vendorFromDate">
    <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
  </div>
  <div class="vendorToDate">
    <label>To Date</label><span class="datepicker"><input type="text" value="456" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
  </div>
</div>

【讨论】：

[label]: this.value; 出现一些语法问题

@VVVV 实际上是动态属性名称的 es6 语法...运行它会看到它工作正常

不，它给我错误javascript critical error at line 309, column 21 in https://localhost:44300/Scripts/App/FiberEngineer.js\n\nSCRIPT1028: Expected identifier, string or number

ok...将使用 es5 语法修复。点击运行代码 sn -p 可以看到它在现代浏览器中运行

【参考方案4】：

只需创建一个映射来保存显示名称和相应的name html 属性的映射。在迭代器中，将结果推送到 JSON 对象而不是数组中。像这样的，

<div class="vendorDaterow">
<div class="vendorName" id="dvVendorNameData">
    <label>SP Vender Name</label><span><input type="text" value="" name="nmVendorData" id="txtVendorName"/></span>
</div>
<div class="vendorFromDate">
    <label>From Date</label>
    <span class="datepicker">

    <input type="text" value="" name="spFromDate" id="spFromDate" class="dateClass"/>
    <i class="fa fa-calendar" aria-hidden="true"></i>
    </span>
</div>
<div class="vendorToDate">
    <label>To Date</label>
    <span class="datepicker">
        <input type="text" value="" name="spToDate" id="spToDate" class="dateClass1"/>
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </span>
</div>

var map=nmVendorData:'Vendor Name', spFromDate:'FromDate', spToDate:'ToDate', 
result=;
$(".vendorDaterow input").each(function (a,b) 
    var text = $(this).val();
  result[map[$(b)[0].name]] = text;

)

您的result 对象将保存您的预期结果。

如果您确实想从用户那里收集多个输入，只需添加一些click 处理程序以提交表单并将result 对象推送到某个数组中。

【参考方案5】：

$(document).ready(function() 
    $('#btnSubmit').click(function() 
        var arrVendorValues = []
        var vendorDaterowObject = $(".vendorDaterow input");

        vendorDaterowObject.each(function() 
            var text = $(this).val();
            if (text) 
                arrVendorValues.push($(this).parents('.label-input').find('label').text() + ': ' + text);
            
        );

        $('h3').text(arrVendorValues.join(', '));
    );
);

Demo