Create a complex multidimensional array depending on input values

Question

I want to prepare and save an multidimensional array to send it via ajax. I have this HTML for example:

<input type="checkbox" class="itArray" value="id,1,name,Alex,gender,male" />
<input type="checkbox"  class="itArray" value="id,2,name,Max,gender,male" />

I want to achieve that every comma (,) seperates key:value pairs in a multidimensional array AND depending on the amount of commas it should create an array (e.g.: 5 commas = 3 key:value pairs like in this example).

The array from this HTML example should look like this then:

(Sorry if I'm putting wrong brackets, I just want to demonstrate what I want to achieve and I don't know the correct syntax)

That is what I have done so far:

var itemsArray;
$('.itArray').each(function(key, value) {
    console.log(itemsArray);
    val = $(value).val();
    console.log("val " + val);
    var ar = val.split(',');
    var itemsArray = { // new each loop here with i % 2 ?  }

        // I don't know how to proceed here

    }
});

I guess I have to use i % 2 to seperate each key:value pairs? But I don't know how to do that exactly in this specific case. I appreciate any help.

Edit: Added Image to show how I want it to look like. Sorry, had to hide sensible data.

probably, you meant each item to be in this structure { "id": "1", "name": "Alex", "gender": "male" }, right? — RomanPerekhrest
– RomanPerekhrest, Commented Jul 16, 2016 at 16:30
There is no such data format in js. If you are using php try json_encode on your data and see what you get. — Nenad Vracar
– Nenad Vracar, Commented Jul 16, 2016 at 19:20

Nenad Vracar · Accepted Answer · 2016-07-16 16:05:55Z

1

You can loop each input with each loop and add to object with help of reduce(). Also there are no multidimensional arrays in js but you can use objects instead.

var result = {}
$('.itArray').each(function(i) {
  var num = 0
  var val = $(this).val().split(',');
  result[i] = val.reduce(function(r, e, i) {
    if (i % 2) r[num++] = {[val[i - 1]]: e}
    return r;
  }, {})
})

document.body.innerHTML = '<pre>' + JSON.stringify(result, 0, 4) + '</pre>';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="itArray" value="id,1,name,Alex,gender,male" />
<input type="checkbox" class="itArray" value="id,2,name,Max,gender,male" />

edited Jul 16, 2016 at 16:05

answered Jul 16, 2016 at 16:04

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AlexioVay Over a year ago

Hey, can you please take a look at my question again and at my image? I used your code but there are too much arrays. I hope you understand it by the image I showed?

Nenad Vracar Over a year ago

You can get data like this instead jsfiddle.net/Lg0wyt9u/1044 or just array of objects jsfiddle.net/Lg0wyt9u/1045 but there is no [key => value] in js it must be {key: value}

Ismail RBOUH · Accepted Answer · 2016-07-16 16:30:43Z

You can use this:

var data = {items: []};
$(".itArray").each(function(key, item) {
    var i = 0;
    var d = item.value.split(",").reduce(function(memo, current, index, arr) {
        index % 2 === 0 ? memo.push({}) : memo[i++][arr[index-1]] = current;
        return memo;
    },[]);
    data.items.push(d);
});

console.log(data);

var data = {items: []};
$(".itArray").each(function(key, item) {
    var i = 0;
    var d = item.value.split(",").reduce(function(memo, current, index, arr) {
        index % 2 === 0 ? memo.push({}) : memo[i++][arr[index-1]] = current;
        return memo;
    },[]);
    data.items.push(d);
});

console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="itArray" value="id,1,name,Alex,gender,male" />
<input type="checkbox"  class="itArray" value="id,2,name,Max,gender,male" />

Morteza Tourani · Accepted Answer · 2016-07-16 16:23:54Z

0

Here you can get key values of checked checkbox with pure JavaScript.

var elements = document.querySelectorAll('.itArray:checked');

var kvArray = [];
elements
  .forEach(el => {
    var kvs = el.value.split(',');
    var result = [];
    for (var i = 0; i < kvs.length; i += 2)
      result.push({
        [kvs[i]]: kvs[i + 1]
      });
    kvArray.push(result);
  });

console.log(JSON.stringify(kvArray, 0, 4));

<input type="checkbox" class="itArray" value="id,1,name,Alex,gender,male" checked/>
<input type="checkbox" class="itArray" value="id,2,name,Max,gender,male" />
<input type="checkbox" class="itArray" value="id,3,name,Vaia,gender,female" checked/>

edited Jul 16, 2016 at 16:23

answered Jul 16, 2016 at 16:16

Morteza Tourani

3,5665 gold badges44 silver badges48 bronze badges

Collectives™ on Stack Overflow

Create a complex multidimensional array depending on input values

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related