將列表推入 JavaScript 中的數組

Question

我有一個從像這樣的動態輸入中獲得的數據列表

   FirstNames : Person1 FN, Person2 FN, Person3 FN, ...
   LastNames : Person1 LN, Person2 LN, Person3 LN, ...

該列表是動態的，我通過這樣的輸入名稱獲取值

    var FirstNames = $("input[name='FirstName']").map(function(){return $(this).val();}).get();

我想將這些和許多其他的作為這樣的數組傳遞到我的 C# 后端

  details:[
   0: {FirstName: 'Person1 FN', LastName: 'Person1 LN'}
   1: {FirstName: 'Person2 FN', LastName: 'Person2 LN'}
   ....................................................
   N{FirstName: 'PersonN FN', LastName: 'PersonN LN'}
  ]

我嘗試了許多不同的方法，例如split() & Push()如下

  let FNs = [];
  let FN = FirstNames.toString().split(',');
  console.log("Splitted First Names : "+TFNs);

  $.each(TFNs, function(){
      FNs.push({FirstName:$(this)}.toString());
  });
  console.log("First Names[] : "+FNs);

編輯：添加表單標記（動態）和 JS Save() Function

這是表格（動態生成）

function GenerateFrms(Id) {
         //alert('Function Scripts');
        $("#FrmContainer").empty();
        var html = "";



        $.ajax({
            type: "POST",
            url: "WebService.asmx/GenerateForms",
            data: "{'Id':'" + Id + "'}",
           
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                console.log(Object.values(data))
                try {
                    for (var i = 0; i <= data.d.length; i++) {
                   
                        if (data.d[i].Persons != "0") {
                            
                            html += " <div class='theme-box-shadow theme-border-radius bg-light mb-3'> ";


                            html += "   <div class='row border-bottom py-2 m-auto'> ";
                            html += "  <div class='col-8'>";
                            html += "   <div class='fw-bold font-medium'> Details </div> ";
                            html += "   </div> ";

                            html += "<div class='col-4 text-end align-self-center'> ";
                            html += " <a class='font-small' data-bs-toggle='collapse' href='#collapseFrm' role='button' aria-expanded='false' aria-controls='collapseFrm'><i class='bi bi-chevron-down ps-1'></i></a>";
                            html += " </div>";
                            html += " </div>";


                            html += "  <div class='' id='collapseFrm'> ";

                            html += " <div class='row'> ";
                            html += " <div class='col-sm-12'> ";
                            html += " <div class='px-3 FrmDetails' id='FrmDetails'> ";

                            for(var j=1; j<=data.d[i].Persons; j++)
                            {

                                html += " <legend class='fw-bold' style='border-bottom:2px solid blue;'> Persons " + j + " Details</legend> ";
                                html += " <ul class='row py-3'> ";


                                html += " <li class='col-12 col-md-12 pb-3'> ";

                                html += " <div class='row'> ";
                                html += " <div class='col-12 col-sm-6 col-md-3 mb-3 mb-md-0'> ";
                                html += " <label for='inlineFormSelectTitle3'>  selected Title </label> ";
                                html += " <select class='form-select Title' name='Title' id='Title" + j + "' > ";
                                html += " <option selected>Title</option> ";
                                html += " <option value='Mr'>Mr.</option> ";
                                html += " <option value='Mrs'>Mrs.</option> ";
                                html += " <option value='Ms'>Ms.</option> ";
                                html += " </select> ";
                                html += " </div> ";

                                html += " <div class='col-12 col-sm-6 col-md-3 mb-3 mb-md-0'> ";
                                html += " <label for='inlineFormSelectTitle3'>  First Name </label> ";
                                html += " <input type='text' class='form-control  FirstName' name='FirstName' id=' FirstName" + j + "' placeholder='First Name'> ";
                                html += " </div> ";

                                html += " <div class='col-12 col-sm-6 col-md-3 mb-3 mb-md-0'> ";
                                html += " <label for='inlineFormSelectTitle3'> Last Name </label> ";
                                html += " <input type='text' class='form-control  LastName' name='LastName' id=' LastName" + j + "' placeholder=' Last Name'> ";
                                html += " </div> ";

                                html += " <div class='col-12 col-sm-6 col-md-3 mb-3 mb-md-0'> ";
                                html += " <label for='inlineFormSelectTitle3'> Date of Birth </label> ";
                                html += " <label class='visually-hidden' for='DateofBirth'> Date of Birth</label> ";
                                html += " <input type='date' class='form-control DOB' name='DOB' id='DOB" + j + "'> ";
                                html += " </div> ";
                                html += " </div> ";
                                html += " </li> ";

                                
                                html += " </li> ";
                                html += " </ul> ";
                            }
                           

                            html += " </div> ";
                            html += " </div> ";
                            html += " </div> ";
                            html += " </div> ";
                            html += " </div> ";
                        }
                        $("#FrmContainer").append(html)
                    }
                    //

                    
                } catch (e) {
                    console.log(e);
                }
            },
            error: function (xhr, status, e) { alert(xhr.responseText); }
        });

    }

腳本 function 和我現在正在使用的樣本 static 數據（我想從上面的表格中動態獲取它們）

function Save() {
        $('#create').prop('disabled', true);
        
        //Reading Values from the respective inputs/select
        var Titles = $("select[name='Title']").map(function(){return "Title:"+$(this).val();}).get();
        var FNames = $("input[name='FirstName']").map(function(){return $(this).val();}).get();
        var LNames = $("input[name='LastName']").map(function(){return $(this).val();}).get();
        var DOBs = $("input[name='DOB']").map(function(){return "DOB:"+$(this).val();}).get();


        //here I want to put them in array like `details[]` array below
        setTimeout(function () {

            let details=[];
            
            details.push({
                Title:"Mr.",
                FirstName:"Person1 FN",
                LastName:"Person1 LN",
                DOB:"1990-05-20"
            });
            
            details.push({
                Title:"Mrs.",
                FirstName:"Person2 FN",
                LastName:"Person2 LN",
                DOB:"2001-06-18"
            })
             console.log(details);

            var DataCarrier = {
                Id: Id, //From Query string
                 PersonsDetails:details
                };

               $.ajax({
                type: "POST",
                url: "WebService.asmx/SavePersons",
                data: JSON.stringify(DataCarrier),
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    try {
                        if (data != null) {
                            setTimeout(function () { window.location = "destinationPage.aspx?Id=" + Id; }, 500);
                        }
                       
                    } catch (e) {
                        console.log(e);
                    }
                },
                error: function (xhr, status, e) { alert(xhr.responseText); }
            });

            }, 5000);
        }

和按鈕

 <input id="btnSave" class="btn btn-effect btn-book px-5" type="button" value="Continue" onclick="Save();" />

但我把它們當作

 [object Object],[object Object],[object Object],[object Object],[object Object]

我也嘗試.toString()但沒有任何變化，並且console.log("FNs: "+json.stringify(FNs)); 正在拋出錯誤。

在將這些數據傳遞到后端之前，我如何處理這些數據？ 我做錯了什么？ 有沒有更好的方法來實現我想要實現的目標？

Answer 1

我認為數組中 firstName 和 lastName 的索引是相同的，所以

var FirstNames = $("input[name='FirstName']")
.map(function(){return $(this).val();}).get();
var LastNames = $("input[name='LastName']")
.map(function(){return $(this).val();}).get();

var FN = FirstNames.map((FN,index) => {
   return {{FirstName: FN, LastName: LastNames[index]}
})

它應該是你想要的東西

Answer 2

第一步是從輸入或 select 中讀取值

  //Reading Values from the respective inputs/select
var Titles = $("select[name='Title']").map(function() { return $(this).val(); }).get();
var FNames = $("input[name='FirstName']").map(function() { return $(this).val(); }).get();
var LNames = $("input[name='LastName']").map(function() { return $(this).val(); }).get();
var DOB = $("input[name='DOB']").map(function() { return $(this).val(); }).get();

然后將值拆分為數組

 //splitting the values into arrays
let TL = Titles.toString().split(',');

let FN = FNames.toString().split(',');

let LN = LNames.toString().split(',');

let BD = DOB.toString().split(',');

之后，您可以像這樣使用for loop將它們推入details[]數組

let details = [];

for (var i = 0; i < FNames.length; i++) {
    details.push({
        Title: TL[i],
        FirstName: FN[i],
        LastName: LN[i],
        DOB: BD[i],
        TravllerType: TT[i]
    });
}
console.log(JSON.stringify(details));

注意：如果你console.log(details); 你會發現它的object:Object東西，為了解決這個問題，我們將它stringify 。

最后將所有這些合並到您的SavePersons() function

function SavePersons() {

        $('#create').prop('disabled', true);

        //Reading Values from the respective inputs/select
        var Titles = $("select[name='Title']").map(function () { return $(this).val(); }).get();
        var FNames = $("input[name='FirstName']").map(function () { return $(this).val(); }).get();
        var LNames = $("input[name='LastName']").map(function () { return $(this).val(); }).get();
        var TravllerTypes = $("input[name='TravllerType']").map(function () { return $(this).val(); }).get();
        var DOB = $("input[name='DOB']").map(function () { return $(this).val(); }).get();


        //splitting the values into arrays
        let TL = Titles.toString().split(',');

        let FN = FNames.toString().split(',');

        let LN = LNames.toString().split(',');

        let TT = TravllerTypes.toString().split(',');

        let BD = DOB.toString().split(',');


        setTimeout(function () {

            let details = [];

            for (var i = 0; i < FNames.length; i++) {
                details.push({
                    Title: TL[i],
                    FirstName: FN[i],
                    LastName: LN[i],
                    DOB: BD[i],
                    TravllerType: TT[i]
                });
            }
            console.log(details);

            var DataCarrier = {
                Id: Id,
                TravelersDetailsTT: details

            };

            $.ajax({
            type: "POST",
            url: "WebService.asmx/SavePersons",
            data: JSON.stringify(DataCarrier),
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                try {
                    if (data != null) {
                        setTimeout(function () { window.location = "destinationPage.aspx?Id=" + Id; }, 5000);
                    }
                   
                } catch (e) {
                    console.log(e);
                }
            },
            error: function (xhr, status, e) { alert(xhr.responseText); }
        });

        }, 5000);
    }

它可能不是最好的答案，但它有效並且我測試了它。 歡迎任何改進。 與此同時，我希望它有所幫助。