【问题标题】:How to append checked/unchecked checkbox values to post data如何将选中/未选中的复选框值附加到发布数据
【发布时间】:2018-12-19 23:52:43
【问题描述】:

在 JavaScript 中(可以使用 jQuery),我将如何转换对象数组:

// Array of objects.
var myArray = [ { code: "X", selected: true }, { code: "Y", selected: false }, { code: "Z", selected: true } ];

变成二维值数组?:

var myArray[0][0] = "X";
myArray[0][1] = true;
myArray[1][0] = "Y";
myArray[1][1] = false;
myArray[2][0] = "Z";
myArray[2][1] = true;

我问是因为我在 AJAX 调用中发送数据时遇到了一些问题,该调用将序列化的表单数据与对象数组结合在一起。

我需要将所有数据映射到 View Model 服务器端:

public class MyViewModel
{
    public MyViewModel()
    {
        selectedRelatedTaxes = new List<RelatedTax>();
    }

    public string co { get; set; }
    public string category { get; set; }
    public string taxCode { get; set; }
    public List<RelatedTax> myArray { get; set; }
}

public class RelatedTax
{
    public string code { get; set; }
    public bool selected { get; set; }
}

这是试图将所有数据组合在一起的 JavaScript 函数:

function GetAllData() {
    var result = {};

    if (!$('#FormID'))
        return {};

    result = $('#FormID:not(input[data-function="partOfArray"])').serializeArray();

    var myArray = [];
    $('input[data-function="partOfArray"]').each(function (index) {
        var code = $(this).val();
        var selected = $(this).is(':checked');

        myArray.push({ code: code, selected: selected });
    });

    if (result) {
        result.push({ name: 'myArray', value: myArray });
    }

    return result;
}

如果我使用上面的函数,我会在 AJAX 调用中得到这个数据:

数组未正确映射到列表服务器端。

如果我改用这个 JavaScript 函数:

function Test() {
    var myArray = [];
    $('input[data-function="partOfArray"]').each(function (index) {
        var code = $(this).val();
        var selected = $(this).is(':checked');

        myArray.push({ code: code, selected: selected });
    });

    return { myArray: myArray };
}

我在 AJAX 调用中得到这个数据:

数组确实映射到服务器端的列表。但这当然缺少所有其他数据。

第二张图片的数据格式是什么?对我来说,它看起来像一个二维数组。如何将我的数据数组与所有其他数据一起转换为该格式?

这是进行 AJAX 调用的代码:

function LoadAddCompanyTaxWizard(url) {
    var formData = GetAllData();

    $.ajax(
        {
            cache: false,
            method: "POST",
            url: url,
            data: formData
        },
        .error(...)
        .success(...),
        .complete(...)
    );
}

【问题讨论】:

  • 问题出在其他地方。发布将数据发布到服务器的代码。
  • 下面有很多关于如何从对象数组转换为数组数组的好答案。但是,查看其余代码并不清楚为什么您没有首先制作您想要的数组。为什么不直接使用Array.push([code, selected ]) 开始?
  • @SalmanA 我已经包含了进行 AJAX 调用的函数。
  • @HereticMonkey 我很抱歉标题确实让它重复了。更改标题以反映真正的潜在问题可能是最好的,尽管我真的不知道该标题是什么。

标签: javascript c# jquery arrays asp.net-mvc


【解决方案1】:

我认为你需要修改代码如下:

function GetAllData() {
  // check if an element exists
  if ($('#FormID').length === 0) {
    return {};
  }

  // use the :not filter correctly
  var result = $('#FormID input:not([data-function="partOfArray"])').serializeArray();

  $('#FormID input[data-function="partOfArray"]').each(function(index) {
    var code = $(this).val();
    var selected = $(this).is(':checked');
    result.push({
      name: "selectedRelatedTaxes[" + index + "][code]",
      value: code
    });
    result.push({
      name: "selectedRelatedTaxes[" + index + "][selected]",
      value: selected
    });
  });

  return result;
}

这是我复制表单的尝试:

function GetAllData() {
  // check if an element exists
  if ($('#FormID').length === 0) {
    return {};
  }

  // use the :not filter correctly
  var result = $('#FormID input:not([data-function="partOfArray"])').serializeArray();

  $('#FormID input[data-function="partOfArray"]').each(function(index) {
    var code = $(this).val();
    var selected = $(this).is(':checked');
    result.push({
      name: "selectedRelatedTaxes[" + index + "][code]",
      value: code
    });
    result.push({
      name: "selectedRelatedTaxes[" + index + "][selected]",
      value: selected
    });
  });

  return result;
}

$("#FormID").on("submit", function(e) {
  e.preventDefault();
  console.log(GetAllData());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="FormID">
  <input name="category" value="State">
  <input name="co" value="CT0002">
  <input name="taxCode" value="AK">
  <input name="selectedRelatedTaxes" data-function="partOfArray" type="checkbox" value="AKSUI" checked="">
  <input name="selectedRelatedTaxes" data-function="partOfArray" type="checkbox" value="AKSUI-E">
  <input name="selectedRelatedTaxes" data-function="partOfArray" type="checkbox" value="FOO" checked="">
  <input name="selectedRelatedTaxes" data-function="partOfArray" type="checkbox" value="BAR">
  <input type="submit" value="Test Script">
</form>

【讨论】:

  • 这对我有用!它在服务器端正确映射了所有内容。 i.imgur.com/TgC5Uip.png
  • 是的,我猜是 XY 问题。
【解决方案2】:

只需map 数组:

var myArray = [ { code: "X", selected: true }, { code: "Y", selected: false }, { code: "Z", selected: true } ];

var result = myArray.map(({code, selected}) => ([code, selected]));
console.log(result);

【讨论】:

  • @mhodges 您的编辑不只是我答案的副本吗? (我在您编辑前 3 分钟回答了)
  • 啊,没看到。记录下来,只有 2 分钟 xD
【解决方案3】:

您可以使用.map()Object.values() 非常简单地做到这一点,如下所示:

var myArray = [ { code: "X", selected: true }, { code: "Y", selected: false }, { code: "Z", selected: true } ];

console.log(myArray.map(obj => Object.values(obj)))

如果您需要保证数组中项目的顺序,您可以执行以下操作:

var myArray = [ { code: "X", selected: true }, { code: "Y", selected: false }, { code: "Z", selected: true } ];

console.log(myArray.map(({code, selected}) => [code, selected]))

第二种方法的缺点是它不是动态的,您必须明确地对数组中的每个元素进行排序。但就一致的输出而言,它要安全得多。

由于您在问题中没有使用 ES6,因此非 ES6 版本将如下所示:

myArray.map(function (obj) {
  return [obj.code, obj.selected]
});

【讨论】:

  • Object.values()会保证正确的顺序吗?
  • @MarkMeyer 不,Object.values 会以任意顺序返回值,因此不能依赖它。
【解决方案4】:

我会使用reduce,两次。

  1. 减少主数组。
  2. 使用它的键减少对象
  3. 将缩减后的对象值推送到当前数组中

var myArray = [ { code: "X", selected: true }, { code: "Y", selected: false }, { code: "Z", selected: true } ];

let result = myArray.reduce((arr, itm, idx) => {
  arr.push(Object.values(itm).reduce((a, i) => a.concat(i), []))
  return arr
}, [])

console.log(result[0][0])
console.log(result[0][1])
console.log(result[1][0])
console.log(result[1][1])
console.log(result[2][0])
console.log(result[2][1])

【讨论】:

  • 这并不总是有效。您不能依赖Object.values[code, selected] 的顺序返回值数组——它以任意顺序返回值。为了安全起见,您必须明确引用对象的 codeselected 键,并且每次都以相同的顺序放置它们。
  • 这不是太复杂了吗?!
【解决方案5】:

这是在 JS 中创建二维数组的方法

var myArray = [];
    $('input[data-function="partOfArray"]').each(function (index) {
    var code = $(this).val();
    var selected = $(this).is(':checked');
    myArray.push([code, selected]);
});

这将创建您描述的数组:

var myArray[0][0] = "X";
myArray[0][1] = true;
myArray[1][0] = "Y";
myArray[1][1] = false;
myArray[2][0] = "Z";
myArray[2][1] = true;

【讨论】:

    【解决方案6】:

    你可以在这里找到很多 ES6 中的解决方案。

    ES5 中的解决方案

    var myArray =
    [
        {code: "X", selected: true},
        {code: "Y", selected: false},
        {code: "Z", selected: true }
    ];
    
    var newArray = myArray.map(function(obj){return [obj.code, obj.selected]});
    
    console.log(JSON.stringify(newArray, null, '\t'));

    【讨论】:

    • 我在 34 分钟前的回答中有一个 ES5 解决方案
    • @mhodges,O_o,不幸的是没有 sn-p 我没有看到它。
    猜你喜欢
    • 1970-01-01
    • 2013-05-21
    • 1970-01-01
    • 2012-07-24
    • 1970-01-01
    • 2013-10-14
    • 2019-09-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多