如何使用jQuery制作数组列表的对象

Question

My project based on spring boot, Thymeleaf, mysql, html and jQuery. My Scenario is getting dynamically generated input box data and static input box data need to carried out and to hit the @controller.

I want to POST as a JSON format in a type of List EntPropertySub that means list of class type , I had a confusion how do I make a list in jQuery. I tried to make a array of object, but it seems error. Please guide me. Here is a sample code

var max;
var blockname;
var floors;
var flatstart;
var flatend;
var blockListPropSub[];
for(max=1;max<=x;max++) {
  blockListPropSub[max] = {
    blockname = $('#block'+max).val();
    floors=$('#floor'+max).val();
    flatstart=$('#flats'+max).val();
    flatend=$('#flatsend'+max).val();
  };
}

Here is a complete script ..

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $("#addingInp"); //Fields wrapper
var add_button      = $("#addButton"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true

        $(wrapper).append('<div style="margin-top: 20px" class="form-row">'
                +'<div class"form-group col-md-3">'
                +'<label for="block'+x+'">Block</label>'
                +'<input id="block'+x+'" th:field="*{blockListPropSub.blockname}" type="text" name="mytext[]" class="form-control block" placeholder="Enter Name"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="floor'+x+'">No of floors</label>'
                +'<input id="floor'+x+'" th:field="*{blockListPropSub.floors}" type="text" name="mytext[]" class="form-control floor" placeholder="Start (Ex : 1)"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="flats'+x+'">No/Name of flats</label>'
                +'<input id="flats'+x+'" th:field="*{blockListPropSub.flatstart}" type="text" name="mytext[]" class="form-control flatstart" placeholder="Start (Ex : A or 1)"/>'
                +'<input id="flatsend'+x+'" th:field="*{blockListPropSub.flatend}" type="text" name="mytext[]" class="form-control flatend" placeholder="End (Ex : Z or 100)"/>'
                +'</div>'

                    +'<a href="#" class="remove_field col-md-1"> X </a>'
                +'</div>'); //add input box
    }
});

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
 //--------------------For Submitting` data to controller
    var url = window.location;
    // SUBMIT FORM
    $("#socityreg").submit(function(event) {
        // Prevent the form from submitting via the browser.
        event.preventDefault();
        ajxPost();
    });

function ajxPost(){

    var max;
    var blockname;
    var floors;
    var flatstart;
    var flatend;
    var blockListPropSub[];
    for(max=1;max<=x;max++)
        {
        blockListPropSub[max]={
            blockname = $('#block'+max).val();
            floors=$('#floor'+max).val();
            flatstart=$('#flats'+max).val();
            flatend=$('#flatsend'+max).val();
                };
        }

    alert(blockListPropSub.blockname[1]);
    // PREPARE FORM DATA
    var formData = {
            property_name : $("#propertyname").val(),
            address1 : $("#inputaddress").val(),
            address2 : $("#inputaddress2").val(),
            city:$("#inputcity").val(),
            state:$("#inputstate").val(),
            country:$("#inputcountry").val(),
            zipcode:$("#inputzip").val(),
            blockListPropSub
    }

    // DO POST
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : url+"/savemasterproperty",
        data :JSON.stringify(formData),
        dataType : 'json',
        success : function(result) {
            if(result == "saved"){
                $("#resultid").html("<strong>" +username+ " Registered Successfully!" );
            }else{
                $("#resultid").html("<strong>Error</strong>");
            }

            alert(result.status);
            console.log(result);
        },
        error : function(e) {
            alert("Error!");
            alert(url);
            console.log("ERROR: ", e);
        }
    });
    // Reset FormData after Posting
        //resetData();


 } 
   /* function resetData(){
        property_name : $("").val(),
        address1 : $("").val(),
address2 : $("").val(),
        city:$("").val(),
        state:$("").val(),
        country:$("").val(),
        zipcode:$("").val(),
    }*/
    });

Answer 1

First, you have to make BlockListPropSub an array, var blockListPropSub = []

then use something like blockname: $('#block' + max).val() to set the value of blockname

 var max; var blockname; var floors; var flatstart; var flatend; var blockListPropSub = []; for (max = 1; max <= 2; max++) { blockListPropSub.push({ blockname: max, //$('#block' + max).val(); floors: max, //$('#floor' + max).val(); flatstart: max, //$('#flats' + max).val(); flatend: max, //$('#flatsend' + max).val(); }) } console.log(blockListPropSub) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>