How to make object of array list using 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(),
    }*/
    });

You will need to replace = with : inside object literals. — Mohammad Usman
– Mohammad Usman, Commented Oct 23, 2017 at 7:27

Carsten Løvbo Andersen · Accepted Answer · 2017-10-23 07:28:28Z

6

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>

answered Oct 23, 2017 at 7:28

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vignesh R Over a year ago

Thanks for reply,,but here $('#block' + max).val(); that input box id which value is taken from HTML...please refer the full script that is made here.

Collectives™ on Stack Overflow

How to make object of array list using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related