get multiple div data from under repeater using jquery

Question

I have a repeater which contains 3 div instead of table.

How can I find the all div data and to make json/xml for sending the same to .cs file for saving the data in sql server.

In javascript, I am trying something like below to just fetch the data.

          function tableToJson() { 
        $('.dataRow').each(function(){
            var data= $(this);
            var ColumnAlias= data.find('div.ColumnAlias p').html();
            var TableNames=data.find('div.ddlTableNames select').val();
            var mainData=ColumnAlias+', '+TableNames;
            var json_text = JSON.stringify(mainData);
        });
    }

Below is my repeater

<asp:Repeater runat="server" ID="rptCorrespondentTemplate" OnItemDataBound="rptCorrespondentTemplate_ItemDataBound">

        <HeaderTemplate>
            <div class=" col-md-12 head-cols">

                <div class="col-md-12 head-row">
                    <div class="col-md-2  width20">
                        <p>S.No</p>
                    </div>
                    <div class="col-md-2  width30" style="left:115px">
                        <p>Header Column</p>
                    </div>
                    <div class="col-md-2  width50" style="left:340px">
                        <p style="padding-left: 13px;">Map to DB</p>
                    </div>
                      </div>
            </div>
        </HeaderTemplate>
        <ItemTemplate>
            <div class="col-md-12 dataRow">
                <div class="col-md-2 width20" style="float: left;">
                    <p style="margin-left: -10px"><%#Container.ItemIndex+1 %></p>
                </div>
                <div class="col-md-2 width30 ColumnAlias" style="float: left;">
                   <p><%# Eval("ColumnAlias") %></p>
                </div>
                <div class="col-md-2 width50" style="float: left;left:50px"">                                                               
                     <asp:DropDownList runat="server" ID="ddltablename" Width="150px" DataTextField="TableName" DataValueField="CorrespondentExcelTemplateCode">
                     <asp:ListItem Text="CustomerName" Value="0" />
                     <asp:ListItem Text="OrderNumber" Value="1" />
                     <asp:ListItem Text="CreateDate" Value="2" />
                     <asp:ListItem Text="AmountToSend" Value="3" />
                     <asp:ListItem Text="Charges" Value="4" />
                     <asp:ListItem Text="PayoutAmount" Value="5" />
                     <asp:ListItem Text="CurrencyName" Value="6" />
                     </asp:DropDownList>
                </div>
            </div>

        </ItemTemplate>
    </asp:Repeater>

Answer 1

You can use .map() along with .get()

var arr = $('.dataRow').map(function(){
                return $.trim($(this).find('div.ColumnAlias').html());
                //return $.trim($(this).find('div.ColumnAlias p').html()); //If you need p value
          })
          .get(); //to get an array