Set Values for dynamically generated input text in jquery

Question

I have a json values in Table2 . Which brings values based on data entered. The data is in below format.

"Table2":[{"SP_VENDOR_ID":94.0,"VENDORCODE":"V001","VENDORNAME":"Vendor 1","SP_VENDOR_START_DATE":"2017-12-04T00:00:00","SP_VENDOR_END_DATE":"2017-12-05T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 2","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"}],

Now I want to fill the above values in the below HTML which Is below

<div class="vendorDaterow">
    <div class="vendorName" id="dvVendorNameData1">
        <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" value="" name="nmVendorData" id="txtVendorName1" /></span>
    </div>
    <div class="vendorFromDate">
        <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate1"/><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="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
</div>

So I tried with below code but not getting it done rightly.

var data = dataResponse;
var divData = $('.vendorDaterow');
$.each(data.Table2, function (i) {
    $.each(data.Table2[i], function (item, index) {
        if (item) {
            $(".vendorDaterow").append(divData);
            $(divData).addClass("vendorDaterow" + index);
            $(".vendorDaterow .vendorName:last").val(item.VENDORNAME);
            $(".vendorDaterow vendorFromDate:last").val(item.SP_VENDOR_START_DATE);
            $(".vendorDaterow .vendorToDate:last").val(item.SP_VENDOR_END_DATE);
        }

    });
});

Please suggest what is wrong here and how should I set it dynamically

Answer 1

The way your code is written you will be repeatedly writing to all your elements with class .vendorDaterow

Below is an example of one possible solution . Avoid setting ID attributes in your repeated template, as the ID should be unique.

 var data = {"Table2":[{"SP_VENDOR_ID":94.0,"VENDORCODE":"V001","VENDORNAME":"Vendor 1","SP_VENDOR_START_DATE":"2017-12-04T00:00:00","SP_VENDOR_END_DATE":"2017-12-05T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 2","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 3","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"}]} $(document).ready(function() { for(var i=1;i< data.Table2.length;i++){ var newId = $(".vendorDaterow").length + 1 var clonedHtml = $(".vendorDaterow:first").clone(true).addClass("vendorDaterow"+newId) clonedHtml.find(".vendorName input").prop("id","txtVendorName"+newId) clonedHtml.find(".vendorFromDate input").prop("id","spFromDate"+newId) clonedHtml.find(".vendorToDate input").prop("id","spToDate"+newId) $(".vendorDaterow:last").after(clonedHtml) } $.each(data.Table2, function(index, item) { $("#txtVendorName"+(index+1)).val(item.VENDORNAME); $("#spFromDate"+(index+1)).val(item.SP_VENDOR_START_DATE); $("#spToDate"+(index+1)).val(item.SP_VENDOR_END_DATE); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="vendorDaterow"> <div class="vendorName" id="dvVendorNameData1"> <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" value="" name="nmVendorData" id="txtVendorName1" /></span> </div> <div class="vendorFromDate"> <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate1" /><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="" id="spToDate1" name="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span> </div> </div> 

Answer 2

If you are sure that you will have only one text box inside each div then directly target the input element.

   $(".vendorDaterow .vendorName input").val(item.VENDORNAME);
   $(".vendorDaterow .vendorFromDate input").val(item.SP_VENDOR_START_DATE);
   $(".vendorDaterow .vendorToDate input").val(item.SP_VENDOR_END_DATE);