Save data values from an input into an multidimensional array

Question

var dataArray = [];
dataArray.push({ items: [] });
var items = $('#services_hidden').val();
var itemsArray = items.split(",");
console.log("itemsArray: " + itemsArray);
$.each( itemsArray, function( index, value ){
    dataArray[0].items.push(value);
});
console.log("dataArray " + JSON.stringify(dataArray));

This way I want to save data in an array reading an input value that like this:

<input id="services_hidden" value="item1,value1,item2,value2,item3,value3" />

So there can be multiple items assigned to a specific value. At the moment it looks like this which is wrong because it's all saved into items not seperated from each other:

dataArray [{"items":["item1","value1","item2,"value2"]}]

But I want this (I hope I show this correctly):

dataArray [{"items":{"item1:value1"},{"item2:value2"}}]

So the parent is items and every two values in #services_hidden.val() seperated by a comma should create an key:value pair.

What do I have to change in my code to achieve this?

What is your approach to the problem so far?

TimoStaudinger
– TimoStaudinger

2016-07-15 21:05:27 +00:00
Commented Jul 15, 2016 at 21:05 — TimoStaudinger
– TimoStaudinger, Commented Jul 15, 2016 at 21:05

Nenad Vracar · Accepted Answer · 2016-07-15 22:20:28Z

1

You can use reduce() do do this

//Select element by id and get value
var val = document.getElementById('services_hidden').value;
//Split value at , and create array
var ar = val.split(',');

//Use reduce to return result in data_array variable
var data_array = ar.reduce(function(r, e, i) {
  //If index of element is odd number, add to result, element of array with previous index number and then current element
  if (i % 2) r[0].items = (r[0].items || []).concat({
    [ar[i - 1]]: e
  });
  //return result array.
  return r;
}, [{}]);

//Add result to HTML
document.body.innerHTML += '<pre>' + JSON.stringify(data_array) + '</pre>';

<input id="services_hidden" value="item1,value1,item2,value2,item3,value3" />

edited Jul 15, 2016 at 22:20

answered Jul 15, 2016 at 21:08

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

5 Comments

AlexioVay Over a year ago

Thank you for your answer. Could you please explain this step by step for a JS-noob?

rvighne Over a year ago

@Vaia: Not an explanation, but documentation for reduce: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Nenad Vracar Over a year ago

@Vaia I added some explanation with comments but to fully understand reduce() you should learn here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

AlexioVay Over a year ago

I think your solution is the best and smartest of these answers. But what does [{}]); exactly means at the end after return?

Nenad Vracar Over a year ago

That is array with object inside it that you passed as result or r parameter in this case and with each iteration you add to r[0].items where r is [], [0] is first item in that array or {} and you add property items to that object that has value of array and you add objects to that array.

rvighne · Accepted Answer · 2016-07-15 21:19:19Z

Loop over the split array, except increment by twos. That way, each iteration, itemsArray[i] is the key and itemsArray[i + 1] is the value.

for (let i = 0; i < itemsArray.length; i += 2) {
    let key = itemsArray[i];
    let value = itemsArray[i + 1];
    dataArray[0].items.push(key + ':' + value);
}

Replace let with var above if you want to support older browsers. Here's a demo (the result will update live as you change the <input>):

var input = document.getElementById('services_hidden');
var pre = document.getElementById('result');

function update() {
  var itemsArray = input.value.split(',');

  var dataArray = [
    {
      items: []
    }
  ];

  for (var i = 0; i < itemsArray.length; i += 2) {
    var key = itemsArray[i];
    var value = itemsArray[i + 1];
    dataArray[0].items.push(key + ':' + value);
  }

  pre.textContent = JSON.stringify(dataArray, null, 4);
}

input.addEventListener('input', update);
update();

<input id="services_hidden" value="item1,value1,item2,value2,item3,value3" />

<pre id="result"></pre>

Nina Scholz · Accepted Answer · 2016-07-15 21:33:31Z

1

I suggest to use Array#forEach, because it visits each element and process it.

var val = document.getElementById('services_hidden').value,
    data_array = [{ items: [] }];
 
data_array[0].items ;
val.split(',').forEach(function(a, i) {
    var o = {};
    if (i & 1) {
        o[this.key] = a;
        data_array[0].items.push(o)
        return;
    }
    this.key = a;
}, { key: null });

document.body.innerHTML += '<pre>' + JSON.stringify(data_array) + '</pre>';

<input id="services_hidden" value="item1,value1,item2,value2,item3,value3" />

answered Jul 15, 2016 at 21:33

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

akinuri · Accepted Answer · 2016-07-15 21:52:49Z

Let's stick to your original format and be as simple as it can be:

var dataArray = [];
dataArray.push({ items: [] });

var items = "item1,value1,item2,value2,item3,value3"; // $('#services_hidden').val()
var itemsArray = items.split(",");

for (var i = 0; i < itemsArray.length; i+=2) {
  var item = itemsArray[i];
  var value = itemsArray[i+1];
  var itemObj = {};
  itemObj[item] = value;
  dataArray[0].items.push(itemObj);
}

console.log("dataArray " + JSON.stringify(dataArray));

The only thing that might need an explanation is for (var i = 0; i < itemsArray.length; i+=2) {. Why increase i by 2? You have 6 items in itemsArray and we'll be inserting 3 items to the dataArray[0].items. We don't need to iterate 6 times.

["item1", "value1", "item2", "value2", "item3", "value3"]
    i       (i+1)      i       (i+1)      i       (i+1)

Since the itemns and valuens are next to each other, we can use i to access the item, and i+1 to access the value.

Collectives™ on Stack Overflow

Save data values from an input into an multidimensional array

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related