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?

muka.gergely · Accepted Answer · 2019-06-17 18:27:51Z

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).

muka.gergely · Accepted Answer · 2019-06-17 16:20:01Z

1

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

answered Jun 17, 2019 at 16:20

muka.gergely

8,3593 gold badges20 silver badges35 bronze badges

8 Comments

napoletoss Over a year ago

hello. i need somethings like loop to collect value from DOM. thanks anyway

muka.gergely Over a year ago

Oh, OK - but is that the HTML in your question form which you want your array?

muka.gergely Over a year ago

In that HTML you don't have a tag for 'connection' and/or for 'platform' - it can only be mined from either the class or the name props. Is this a correct assumption? From which one would it be better? Or can you add a data-something to the checkboxes that contain this information?

napoletoss Over a year ago

sorry. if you talking about selector then it doesn't matter which one to use or what?

muka.gergely Over a year ago

It’s about grouping. Creating a group is OK, but if you want specific names for those groups (dynamically), then they must be set from a reliable source - a source that doesn’t change, and has all the required data in it.

|

Collectives™ on Stack Overflow

make a multidimensional array in jquery

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related