CODEWITHSUNDEEP
javascriptjquerymultidimensional-array
AlexioVay
AlexioVay

Reputation: 4527

Create a complex multidimensional array depending on input values

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:

enter image description here

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

Upvotes: 1

Views: 247

Answers (3)

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

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

Upvotes: 1

Morteza Tourani
Morteza Tourani

Reputation: 3536

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

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122037

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

Upvotes: 1

Related Questions