1

Context: The following function is called within a loop that is iterating through all of the inputs in a form.

collectCurrentSetting = function(index, element) {
    element   = $(element);
    var name  = element.attr('name');
    var value = element.val();
    currentValues[name] = value;
}

There is a section in that form that contains multiple inputs that use brackets in the name attribute to annotate that they belong as a part of an array. For sake of argument, let's say they are attributes of a person like so:

people[0][firstName]
people[0][lastName]
people[1][firstName]
people[2][lastName]

The goal is that it should create something like this:

currentValues[people][0][firstName] = 'jimbo';

It is technically, in that format, but it's treating everything in the brackets like a single key. And once it gets sent to the server it looks something like this:

currentValues["people[0][firstName"] = 'jimbo';

Question: How do I get it to properly parse these values and store them as an array in the currenValues variable?

Nicholas Cardot
  • 956
  • 1
  • 11
  • 30
  • out of curiosity, it looks like you're trying to serialize a form, and you have jquery. You could just json serialize it and it should basically do all that for you, i think? – Nikki9696 Apr 24 '19 at 20:22
  • you can use a regex to parse it https://regexr.com/4cs5i and then build your desired structure. – David Horák Apr 24 '19 at 20:23
  • @Nikki9696 Do you mean to actually change the text that is in the name attribute to something that is JSON formatted? If so, the form would stop working during non-JS submissions. As it is, it works properly without JS, but this method fails when attempting the AJAX method of saving the form. I would prefer to retain those name attributes as the standard HTML format of using arrays in them. – Nicholas Cardot Apr 24 '19 at 20:30
  • Why don't you just use `$("#formID").serialize()`? It knows how to parse all of this and create the parameters that get sent to the server. – Barmar Apr 24 '19 at 20:42
  • Take a look at https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key?noredirect=1&lq=1 – Barmar Apr 24 '19 at 20:44
  • @NicholasCardot no, i mean use serizalize if you're sending with ajax. like barmar has up there. nothing else should break and you shouldn't have to change names of things. – Nikki9696 Apr 24 '19 at 21:30
  • Yeah, I've tried serialize now, and once it gets parsed it just reverts back to the weird formatting that it was before. – Nicholas Cardot Apr 24 '19 at 21:40

1 Answers1

0

Problem: So any time I attempted to use any built in parsing tools, it always used the entire name field as the key/name of the array. As such, the key for the array was person[0][firstName], whereas that should have been 3 keys each nested in a new layer of a multidimensional array.

Solution: However, I have just discovered a very helpful jQuery plugin that accomplishes this task perfectly:

https://github.com/macek/jquery-serialize-object

Now, you simply select the form and call serializeObject() and the result is a perfectly formatted multidimensional array.

Example:

// The form HTML
<form id="myForm">
<input type="text" name="test2" />
<select name="important_select">
    // Select options go here.
</select>
<input type="text" name="categories[0][category_name]" />
<input type="text" name="categories[1][category_name]" />
<input type="text" name="categories[2][category_name]" />
</form>

// Include the dependancies 
<script src="jquery.min.js"></script> // This requires jQuery as a dependancy
<script src="jquery.serialize-object.min.js"></script> // Be sure to include the plugin

// Parse the form into a multidimensional array.
var currentValues = $("#myForm").serializeObject();

The result upon using console.log(currentValues) is as follows:

categories: {
    0: {category_name: "World Cuisine"},
    1: {category_name: "Diet of Course"},
    2: {category_name: "Meal Type"}
},
important_select: "2",
test2: ""
Nicholas Cardot
  • 956
  • 1
  • 11
  • 30