Adding multiple elements by name to a JSON object using Javascript

Question

I have a function that takes in, for example, 10 textboxes worth of values and puts them into a JSON string that I then store in a cookie. I have no issues if I hard code the problem where I'm grabbing the element "assignment[]", but I'd also like to add other text box values to it, say "quizzes[]", as an example, in order to have one long string that I would then convert to a JSON string.

function setObject(name, score)
{
    this.name = name;
    this.score = score;
}

function setCookie()
{   
    var cookieName = "assignments";
    var cookieValue = document.getElementsByName("assignments[]");

    var arr = [];
    for(var i=0;i<cookieValue.length;i++)
    {
        var setObj = new setObject(cookieName + i, cookieValue[i].value);
        arr.push(setObj);
    }
    document.cookie = JSON.stringify(arr);
}

This code above works just fine for just the "name[]" textboxes, but I'd like to be able to add other elements to that same JSON string.

My current output would look like this:

[{"name":"assignments0","score":"1"},{"name":"assignments1","score":"2"},
{"name":"assignments2","score":"3"},{"name":"assignments3","score":"4"}]

My expected output would look like this if I were able to add different textbox arrays through my function:

[{"name":"assignments0","score":"22"},{"name":"assignments1","score":"19"},
{"name":"assignments2","score":"9"},{"name":"assignments3","score":"20"},
{"name":"quizzes0","score":"5"},{"name":"quizzes1","score":"9"}]

Any help in the right direction would be much appreciated.

Arun P Johny · Accepted Answer · 2016-02-10 05:10:27Z

You can use querySelectorAll() with attribute selector to fetch all the elements like

function setObject(name, score) {
  this.name = name;
  this.score = score;
}

function setCookie() {
  var els = document.querySelectorAll('input[name="assignments[]"],input[name="quizes[]"]');

  var arr = [];
  for (var i = 0; i < els.length; i++) {
    var setObj = new setObject(els[i].name.slice(0, -2) + i, els[i].value);
    arr.push(setObj);
  }

  result1.innerHTML = JSON.stringify(arr, null, 2);


  var arr = [].map.call(els, function(el) {
    return new setObject(el.name.slice(0, -2) + i, el.value);
  });
  result2.innerHTML = JSON.stringify(arr, null, 2);
}
setCookie();

<input name="assignments[]" value="1" />
<input name="assignments[]" value="2" />
<input name="assignments[]" value="3" />
<input name="assignments[]" value="4" />

<input name="quizes[]" value="1" />
<input name="quizes[]" value="2" />
<input name="quizes[]" value="3" />
<input name="quizes[]" value="4" />

<pre id="result1"></pre>
<pre id="result2"></pre>

kanudo · Accepted Answer · 2016-02-10 05:56:52Z

You can assign all the Input Name Arrays to an Array and iterate over it, as in the code below.

var inputs = ["assignments", "quizzes", "three", "four"];

function setObject(name, score) {
  this.name = name;
  this.score = score;
}

function setCookie() {

  var inputs = ["assignments", "quizzes", "three", "four"];
  var arr = [];

  for (var i = 0; i < inputs.length; i++) {

    var cookieName = inputs[i];
    var cookieValue = document.getElementsByName(inputs[i] + '[]');

    for (var j = 0; j < cookieValue.length; j++) {
      var setObj = new setObject(cookieName + j, cookieValue[j].value);
      arr.push(setObj);
    }
    
  }

  result.innerHTML = JSON.stringify(arr, null, 2);
  
  //document.cookie = JSON.stringify(arr);

}
setCookie();

<input name="assignments[]" value="1" />
<input name="assignments[]" value="2" />
<input name="assignments[]" value="3" />

<input name="quizzes[]" value="11" />
<input name="quizzes[]" value="22" />
<input name="quizzes[]" value="33" />

<input name="three[]" value="111" />
<input name="three[]" value="222" />
<input name="three[]" value="333" />

<input name="four[]" value="1111" />
<input name="four[]" value="2222" />
<input name="four[]" value="3333" />

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

OUTPUT

[
  {"name": "assignments0","score": "1"},
  {"name": "assignments1","score": "2"},
  {"name": "assignments2","score": "3"},

  {"name": "quizzes0","score": "11"},
  {"name": "quizzes1","score": "22"},
  {"name": "quizzes2","score": "33"},

  {"name": "three0","score": "111"},
  {"name": "three1","score": "222"},
  {"name": "three2","score": "333"},

  {"name": "four0","score": "1111"},
  {"name": "four1","score": "2222"},
  {"name": "four2","score": "3333"}
]

Matthew Herbst · Accepted Answer · 2016-02-10 06:29:47Z

1

Just make it a function?

function getElementsArr(elementsName) {
    var elements = document.getElementsByName(elementsName + "[]");

    var arr = [];
    for(var i=0; i < elements.length;i++)
    {
        var setObj = new setObject(elementsName + i, elementss[i].value);
        arr.push(setObj);
    }

    return arr;
}

function setCookie(elementNames)
{   
    var allElements = [];
    for(var i = 0; i < elementNames.length; i++) {
      allElements.push(getElementsArr(elementNames[i]));
    }

    document.cookie = JSON.stringify(allElements);
}

setCookie(['assignments', 'quizzes']);

edited Feb 10, 2016 at 6:29

answered Feb 10, 2016 at 5:12

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

Collectives™ on Stack Overflow

Adding multiple elements by name to a JSON object using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest