JavaScript create multi level object

Question

I want to create an object like this:

var exampleObject = {
    '1' : ['2','3','7'],
    '2' : ['4','7'],
    '4' : ['5','1','2']
  };

from a list of inputs fields:

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

The idea is that for each input with the same "name" attribute i would like to have the values from the "value" field in the input. I have tried different approaches but without success. Any suggestion on how i could achieve this?

It wasn't meant to be there, really sorry man. Coffee sometime doesn't work properly :D — Indrit Sholla, Oct 07 '16 at 10:15

score 4 · Accepted Answer · edited May 23 '17 at 12:00

Use document.querySelectorAll to select all '.flat-red' elements
Use [].forEach.call to iterate elements

var elems = document.querySelectorAll('.flat-red');
var obj = {};
[].forEach.call(elems, function(el) {
  if (!obj[el.name]) {
    obj[el.name] = [el.value];
  } else {
    obj[el.name].push(el.value);
  }
});
console.log(obj);

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

Using Array#reduce

var elems = document.querySelectorAll('.flat-red');
var a = [].reduce.call(elems, function(a, b) {
  return !a[b.name] && (a[b.name] = []), a[b.name].push(b.value), a;
}, {});
console.log(JSON.stringify(a, null, 4));

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

If getting object based on checked status

var allElems = document.querySelectorAll('.flat-red');
[].forEach.call(allElems, function(el) {
  el.addEventListener('change', function() {
    var elems = document.querySelectorAll('.flat-red:checked');
    var a = [].reduce.call(elems, function(a, b) {
      return !a[b.name] && (a[b.name] = []), a[b.name].push(b.value), a;
    }, {});
    console.log(JSON.stringify(a, null, 4));
  });
});

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

score 1 · Answer 2 · answered Oct 07 '16 at 09:53

using reduce:

var elems = document.querySelectorAll('.flat-red');

var r = Array.from(elems) //transform to array
.reduce((ac,x) =>{
  if(!ac[x.name])
    ac[x.name] = [];
  
  ac[x.name].push(x.value)
  return ac;
} ,{})
        
console.log(r)

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

Thank you, this works fine too. I just marked the below answer because i am not familiar with the reduce function. Have a nice day! — Indrit Sholla, Oct 07 '16 at 10:09

Nenad Vracar · Answer 3 · 2016-10-07T09:51:57.137

You can do this with for() loop and one object.

var result = {}
var inputs = document.querySelectorAll('.flat-red');

for (var i = 0; i < inputs.length; i++) {
  var name = inputs[i].name;
  var val = inputs[i].value;
  if (!result[name]) {
    result[name] = [];
  }
  result[name].push(val);
}

console.log(result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

jquery solution to a vanilla javascript tagged question ?!? – Jamiec Oct 07 '16 at 09:49 — Jamiec, Oct 07 '16 at 09:49
@Jamiec Thanks, didn't watch the tags, i updated my answer. – Nenad Vracar Oct 07 '16 at 09:52 — Nenad Vracar, Oct 07 '16 at 09:52

score 0 · Answer 4 · answered Oct 07 '16 at 09:48

You can do this pretty easily with a loop across the elements building up a blank object as you go.

document.getElementById("go").addEventListener("click",function(){
  var elems = document.querySelectorAll(".flat-red");
  var result = {};
  
  for(var i=0;i<elems.length;i++){
    var elem = elems[i];
    var name =elem.getAttribute("name");
    if(!result.hasOwnProperty(name)){
       result[name] = [];  
    }
    result[name].push(elem.value);
  };
  console.log(result)
});

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

<button id="go">Do it</button>

score 0 · Answer 5 · answered Oct 07 '16 at 09:49

let result = {};
let inputs = document.querySelectorAll('input');
for (let input of inputs) {
  result[input.name] = result[input.name] || [];
  result[input.name].push(input.value);
}
document.write(JSON.stringify(result));

<input type="checkbox" class="flat-red" name="1" value="2">
<input type="checkbox" class="flat-red" name="1" value="3">
<input type="checkbox" class="flat-red" name="1" value="7">
<input type="checkbox" class="flat-red" name="2" value="4">
<input type="checkbox" class="flat-red" name="2" value="7">
<input type="checkbox" class="flat-red" name="4" value="5">
<input type="checkbox" class="flat-red" name="4" value="1">
<input type="checkbox" class="flat-red" name="4" value="2">

JavaScript create multi level object

5 Answers5