Question

我有一个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

Answer 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中触发它。

Answer 2

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 3

使用filter（）从collection和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>

Answer 4

尝试以下方法：

$('#btnJSONCreat').click(function(){
  var arrVendorValues = [];
  $(".vendorDaterow input").each(function () {
      var text = $(this).val();
      var label = $(this).parent().siblings("label").text()
      var obj = {};
      obj[label] = text;
      if (text) {
          arrVendorValues.push(obj);
      }
  });
  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 id="btnJSONCreat">Create</button>

Answer 5

只需创建一个地图，用于保存显示名称和相应的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对象推送到某个数组中。

Answer 6

$(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

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

6 个答案: