在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

根据 cmets 中的讨论，答案如下：

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