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
– Indrit Sholla, Commented Oct 7, 2016 at 10:15

Community · Accepted Answer · 2017-05-23 12:00:56Z

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

maioman · Accepted Answer · 2016-10-07 09:53:18Z

1

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

answered Oct 7, 2016 at 9:53

maioman

18.8k4 gold badges39 silver badges46 bronze badges

1 Comment

Indrit Sholla Over a year ago

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!

Jamiec · Accepted Answer · 2016-10-07 09:48:53Z

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>

Pavel Staselun · Accepted Answer · 2016-10-07 09:49:26Z

0

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

answered Oct 7, 2016 at 9:49

Pavel Staselun

2,0201 gold badge13 silver badges24 bronze badges

Comments

Nenad Vracar · Accepted Answer · 2016-10-07 09:51:57Z

0

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

edited Oct 7, 2016 at 9:51

answered Oct 7, 2016 at 9:48

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

2 Comments

Jamiec Over a year ago

jquery solution to a vanilla javascript tagged question ?!?

Nenad Vracar Over a year ago

@Jamiec Thanks, didn't watch the tags, i updated my answer.

Collectives™ on Stack Overflow

JavaScript create multi level object

5 Answers 5

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related