make a multidimensional array in jquery

Question

my html code is:

    <input class='change_connection' name='test[connection][]' type='checkbox' value="3G">
    <input class='change_connection' name='test[connection][]' type='checkbox' value="wifi">
    <input class='change_platform' name='test[platform][]' value='mobile' type='checkbox'>
    <input class='change_platform' name='test[platform][]' value='desktop' type='checkbox'>
    <input class='change_platform' name='test[platform][]' value='tablet' type='checkbox'>

in php i make with it a multidimensional array that looks like this:

    Array
(
    [connection] => Array
        (
            [0] => 3G
            [1] => wifi
        )

    [platform] => Array
        (
            [0] => mobile
            [1] => desktop
            [2] => tablet
        )

)

So can you help do the same array with the same structure in jquery?

Answer 1

Based on the discussion in the comments, here's the answer:

// creating the object that will hold the valeues
let groups = {}
// querying DOM for the elements we want
const inputList = document.querySelectorAll('input')

// iterating over the query result
for (let item of inputList) {
  // get the value of attribute 'data-group'
  const attribute = item.getAttribute('data-group')
  // if the attribute is not in the groups object,
  // then add with an array
  if (!(attribute in groups)) {
    groups[attribute] = []
  }
  // push the value of the value attribute to the array
  groups[attribute].push(item.getAttribute('value'))
}



// displaying result in the console
console.log(groups)

// regular syntax
console.log('3G from the groups: ', groups.connection[0])
console.log('tablet from the groups: ', groups.platform[2])

// array syntax - multidimensional array
console.log('3G from the groups (array): ', groups['connection'][0])
console.log('tablet from the groups (array): ', groups['platform'][2])

// if the keys in the groups object are not known
// (so you cannot count on calling them by a string),
// then this is how you iterate through the object:
for (let key of Object.keys(groups)) {
  groups[key].forEach(item => {
    console.log(key + ": ", item)
  })
}

<input class='change_connection' name='test[connection][]' type='checkbox' data-group="connection" value="3G">
<input class='change_connection' name='test[connection][]' type='checkbox' data-group="connection" value="wifi">
<input class='change_platform' name='test[platform][]' data-group="platform" value='mobile' type='checkbox'>
<input class='change_platform' name='test[platform][]' data-group="platform" value='desktop' type='checkbox'>
<input class='change_platform' name='test[platform][]' data-group="platform" value='tablet' type='checkbox'>

The one important difference from the dataset you provided is that it's not only data but data-group. In HTML5 the way to add custom data to DOM elements is using the data-* prefix, but then you need to append your name to the attribute (I named it group, so it's data-group in the HTML).

Answer 2

Have you tried this:

// this is an object that has arrays in it
const object = {
  connection: ['3G', 'wifi'],
  platform: ['mobile', 'desktop', 'tablet']
}

// calling a value:
console.log(object.connection[0]) // expected output: 3G
console.log(object.platform[1]) // expected output: desktop

This is not a multidimensional array (of course, under the hood it is), but a JavaScript object that has arrays in it.

This would also be a valid call (just to see that it's a multidimensional array under the hood):

console.log(object['platform'][0]) // expected output: mobile