How to serializeObject with nested object in javascript?

Question

I have

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

this 2 dim array that I want to display on HTML page using javascript and then get the result back in JSON from after clicking a button.

For now, I displayed the values of resource_raio using this

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]);
  }

which gave me result of one single array with all the values inside like [val1, val2, val3]

And when I do

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

the JSON result

It's not in form of

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

as I wanted it to be. So I've tried changing the name of the input of array values (Since I've learned that SerializeObject group values by the name of input) and made something like this

      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]);
  }

(Its the same code except I changed the p tag to input tag]

which gave me serialized values of

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

which is ALMOST same as how I want it to be, except it's not INSIDE the resource_ratio values, it's grouped by [0] and [1] (following by the input name).

What should I do to get my resourceRatio[i][j] values inside [i] which is inside the resourceRatio key? I'm sorry if my question is so confusing

the serializeObject is a plug in of jquery I used. It's this:

$.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;
};

Please don't use images to reflect your data structure or your code. Please replace your images with the actual artifact. Thanks. — Randy Casburn
– Randy Casburn, Commented Nov 8, 2021 at 1:00
@RandyCasburn hello I've tried removing the pictures is this working fine? — user16535642
– user16535642, Commented Nov 8, 2021 at 1:13
Yes, thanks. I didn't realize jQuery had a .serializeObject() method. What version of jQuery are you using? — Randy Casburn
– Randy Casburn, Commented Nov 8, 2021 at 1:13
@RandyCasburn Oh my bad.. this is a plugin of jquery i used. I'm sorry. Should I change the tag too?? — user16535642
– user16535642, Commented Nov 8, 2021 at 1:14
Yeah, so it doesn't look like you need the plugin. You will get the same result using .serializeArray(). — Randy Casburn
– Randy Casburn, Commented Nov 8, 2021 at 1:17

Tom · Accepted Answer · 2022-02-17 07:59:36Z

0

The easiest way to convert a value to JSON is to use JSON.stringify:

let dataAsString = JSON.stringify( myObject )

This will break if your object has any circular references. That won't be a problem if your data is a typical piece of business data.

And then to convert it back:

let data = JSON.parse( dataAsString )

Unless you have a very special reason for doing so, I'd recommend that you always use this built-in capability instead of something from a library like jQuery.

answered Feb 17, 2022 at 7:59

Tom

9,2087 gold badges56 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

How to serializeObject with nested object in javascript?

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