时间戳

首页 > 解决方案 > 如何在javascript中使用嵌套对象序列化对象？

javascript - 如何在javascript中使用嵌套对象序列化对象？

问题描述

我有

 "resource_ratio": [
            [
               "Barbara",
               "Ben",
               "Anne",
               "John",
               "Cindy",
               "Nick",
               "Lex",
               "Edd",
               "Eric",
               "Jacky",
               "Paul"
            ],
            [
               0.11974110032362459,
               0.037756202804746494,
               0.23516720604099245,
               0.10895361380798274,
               0.10140237324703344,
               0.03559870550161812,
               0.02912621359223301,
               0.08737864077669903,
               0.02481121898597627,
               0.1186623516720604,
               0.10140237324703344
            ]
         ]

我想使用 javascript 在 HTML 页面上显示这 2 个昏暗数组，然后在单击按钮后以 JSON 格式返回结果。

现在，我使用这个显示了 resource_raio 的值

var resourceRatioBoxTag = new Array();
  var resourceRatioTag = new Array();
  for (var i = 0; i < selectedData.resource_ratio.length; i++) {
    //selectedData.resource_ratio[1][0]
    resourceRatioBoxTag[i] = "<input id='resourceRatio[" + i + "]' name='resourceRatio'>";
    for (var j = 0; j < selectedData.resource_ratio[i].length; j++) {
      resourceRatioBoxTag[i] += "<input type='text' id='resourceRatio[" + i + "][" + j + "]' value='" + selectedData.resource_ratio[i][j] + "' name='" + i + "'>";
    }
    resourceRatioBoxTag[i] += "</input>";
     $("#resourceRatioDiv").append(resourceRatioBoxTag[i]);
  }

这给了我一个包含所有值的单个数组的结果，例如 [val1, val2, val3]

当我这样做时

var dataBox = $('#inputDataForm').serializeObject();

JSON 结果

它不是形式

“resource_ratio”：[[“芭芭拉”、“本”、“安妮”、“约翰”、“辛迪”、“尼克”、“莱克斯”、“艾德”、“埃里克”、“杰基”、“保罗”] , [ 0.11974110032362459, 0.037756202804746494, 0.23516720604099245, 0.10895361380798274, 0.10140237324703344, 0.03559870550161812, 0.02912621359223301, 0.08737864077669903, 0.02481121898597627, 0.1186623516720604, 0.10140237324703344 ] ]

正如我想要的那样。因此，我尝试更改数组值的输入名称（因为我已经了解到 SerializeObject 通过输入名称对值进行分组）并做了类似的事情

      for (var i = 0; i < selectedData.resource_ratio.length; i++) {
    //selectedData.resource_ratio[1][0]
    resourceRatioBoxTag[i] = "<p id='resourceRatio[" + i + "]' name='resourceRatio'>";
    for (var j = 0; j < selectedData.resource_ratio[i].length; j++) {
      resourceRatioBoxTag[i] += "<input type='text' id='resourceRatio[" + i + "][" + j + "]' value='" + selectedData.resource_ratio[i][j] + "' name='" + i + "'>";
    }
    resourceRatioBoxTag[i] += "</p>";
     $("#resourceRatioDiv").append(resourceRatioBoxTag[i]);
  }

（除了我将 p 标签更改为输入标签之外，它的代码相同]

这给了我序列化的值

"0": [
    "Barbara",
    "Ben",
    "Anne",
    "John",
    "Cindy",
    "Nick",
    "Lex",
    "Edd",
    "Eric",
    "Jacky",
    "Paul"
  ],
  "1": [
    "0.11974110032362459",
    "0.037756202804746494",
    "0.23516720604099245",
    "0.10895361380798274",
    "0.10140237324703344",
    "0.03559870550161812",
    "0.02912621359223301",
    "0.08737864077669903",
    "0.02481121898597627",
    "0.1186623516720604",
    "0.10140237324703344"
  ]

这与我想要的几乎相同，除了它不在 resource_ratio 值内，它按 [0] 和 [1] 分组（后跟输入名称）。

我应该怎么做才能在 resourceRatio 键内的 [i] 中获取我的 resourceRatio[i][j] 值？如果我的问题如此令人困惑，我很抱歉

serializeObject 是我使用的 jquery 插件。是这样的：

$.fn.serializeObject = function () {
  var o = {};
  var a = this.serializeArray();
  $.each(a, function () {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
};

标签： javascript

解决方案

将值转换为 JSON 的最简单方法是使用JSON.stringify：

let dataAsString = JSON.stringify( myObject )

如果您的对象有任何循环引用，这将中断。如果您的数据是典型的业务数据，那将不是问题。

然后将其转换回来：

let data = JSON.parse( dataAsString )

除非您有非常特殊的理由这样做，否则我建议您始终使用此内置功能，而不是使用 jQuery 之类的库中的功能。

推荐阅读