javascript serializing form with nested object values using serializeObject()

Question

I asked How to serializeObject with nested object in javascript? this question earlier and I thought I almost got the answer using Object.values but I couldn't still solve it so I'm changing my question and asking again.

I have

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            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;
};

as serializeObject(); and form as

        var resourceRatioBoxTag = new Array();
  for (var i = 0; i < selectedData.resource_ratio.length; i++) {
    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='resourceRatio[" + i + "]'>";
    }
    resourceRatioBoxTag[i] += "</p>";
     $("#resourceRatioDiv").append(resourceRatioBoxTag[i]);
  }

so basically my HTML looks like this:

<p id="resourceRatio[0]" name="resourceRatio">
<input type="text" id="resourceRatio[0][0]" value="Barbara" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][1]" value="Ben" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][2]" value="Anne" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][3]" value="John" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][4]" value="Cindy" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][5]" value="Nick" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][6]" value="Lex" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][7]" value="Edd" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][8]" value="Eric" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][9]" value="Jacky" name="resourceRatio[0]">
<input type="text" id="resourceRatio[0][10]" value="Paul" name="resourceRatio[0]">
</p>
<p id="resourceRatio[1]" name="resourceRatio">
<input type="text" id="resourceRatio[1][0]" value="0.11974110032362459" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][1]" value="0.037756202804746494" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][2]" value="0.23516720604099245" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][3]" value="0.10895361380798274" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][4]" value="0.10140237324703344" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][5]" value="0.03559870550161812" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][6]" value="0.02912621359223301" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][7]" value="0.08737864077669903" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][8]" value="0.02481121898597627" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][9]" value="0.1186623516720604" name="resourceRatio[1]">
<input type="text" id="resourceRatio[1][10]" value="0.10140237324703344" name="resourceRatio[1]"></p>

I want to obtain the serialized result of json object as:

"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
            ]
         ]

but with my current code, I get

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

I want to get help in changing either the serializeObject() function to help me getting the result I want, or changing the input tag (for example, the name of input tag) to get nested object result serialized. Can someone help me please?

p.s: if I change the name of input tag from resourceRatio[ + i + ] to resourceRatio it returns only 1 array [val[0][0], . . . val[1][10]] so it can't be used :(

H I · Accepted Answer · 2021-11-16 02:22:22Z

1

try

  var  serializedData = data.serializeObject();
  var obj = Object.values(serializedData);

it will give you return values of serializedData { key:value } form's values only. (in your case, [names][numbers]) Since it only copies your values you don't have to care about what name you wanna give to your resource_ratio tag. Because the result you want is not [0:[], 1:[]] but [[],[]]

answered Nov 16, 2021 at 2:22

H I

1001 gold badge2 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

javascript serializing form with nested object values using serializeObject()

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related