сделать многомерный массив в jquery

Question

мой HTML-код:

    <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'>

в php я делаю с ним многомерный массив, который выглядит следующим образом:

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

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

)

Так вы можете помочь сделать тот же массив с той же структурой в JQuery?

Answer 1

Исходя из обсуждения в комментариях, вот ответ:

// 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'>

Одно важное отличие от предоставленного вами набора данных состоит в том, что он не только data, но data-group. В HTML5 способ добавления пользовательских данных в элементы DOM заключается в использовании префикса data-*, но затем вам необходимо добавить свое имя к атрибуту (я назвал его group , так что это data-group в HTML).

Answer 2

Вы пробовали это:

// 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

Это не многомерный массив (конечно, он скрыт), а объект JavaScript, в котором есть массивы.

Это также будет допустимый вызов (просто чтобы увидеть, что это многомерный массив под капотом):

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