How to create json by JavaScript for loop?

JavascriptJson

Javascript Problem Overview


I have array of select tag.

<select id='uniqueID' name="status">
      <option value="1">Present</option>
      <option value="2">Absent</option>
 </select>

and I want to create a json object having two fields 'uniqueIDofSelect and optionValue' in JavaScript.

I use getElementsByName("status") and I iterate on it.

EDIT

I need out put like

[{"selectID":2,"OptionValue":"2"},{"selectID":4,"optionvalue":"1"}]

and so on...

Javascript Solutions


Solution 1 - Javascript

From what I understand of your request, this should work:

<script>
//  var status  = document.getElementsByID("uniqueID"); // this works too
var status  = document.getElementsByName("status")[0];
var jsonArr = [];

for (var i = 0; i < status.options.length; i++) {
	jsonArr.push({
		id: status.options[i].text,
		optionValue: status.options[i].value
	});
}
</script>

Solution 2 - Javascript

var sels = //Here is your array of SELECTs
var json = { };

for(var i = 0, l = sels.length; i < l; i++) {
  json[sels[i].id] = sels[i].value;
}

Solution 3 - Javascript

If you want a single JavaScript object such as the following:

{ uniqueIDofSelect: "uniqueID", optionValue: "2" }

(where option 2, "Absent", is the current selection) then the following code should produce it:

  var jsObj = null;
  var status = document.getElementsByName("status")[0];
  for (i = 0, i < status.options.length, ++i) {
     if (options[i].selected ) {
        jsObj = { uniqueIDofSelect: status.id, optionValue: options[i].value };
        break;
     }
  }

If you want an array of all such objects (not just the selected one), use michael's code but swap out status.options[i].text for status.id.

If you want a string that contains a JSON representation of the selected object, use this instead:

  var jsonStr = "";
  var status = document.getElementsByName("status")[0];
  for (i = 0, i < status.options.length, ++i) {
     if (options[i].selected ) {
        jsonStr = '{ '
                  + '"uniqueIDofSelect" : '
                  + '"' + status.id + '"'
                  + ", "
                  + '"optionValue" : '
                  + '"'+ options[i].value + '"'
                  + ' }';
        break;
     }
  }

Solution 4 - Javascript

If I want to create JavaScript Object from string generated by for loop then I would JSON to Object approach. I would generate JSON string by iterating for loop and then use any popular JavaScript Framework to evaluate JSON to Object.

I have used Prototype JavaScript Framework. I have two array with keys and values. I iterate through for loop and generate valid JSON string. I use evalJSON() function to convert JSON string to JavaScript object.

Here is example code. Tryout on your FireBug Console

var key = ["color", "size", "fabric"];
var value = ["Black", "XL", "Cotton"];

var json = "{ ";
for(var i = 0; i < key.length; i++) {
    (i + 1) == key.length ? json += "\"" + key[i] + "\" : \"" + value[i] + "\"" : json += "\"" + key[i] + "\" : \"" + value[i] + "\",";
}
json += " }";
var obj = json.evalJSON(true);
console.log(obj);

Solution 5 - Javascript

Your question is pretty hard to decode, but I'll try taking a stab at it.

You say:

> I want to create a json object having two fields > uniqueIDofSelect and optionValue in javascript.

And then you say:

> I need output like > > [{"selectID":2,"optionValue":"2"}, > {"selectID":4,"optionvalue":"1"}]

Well, this example output doesn't have the field named uniqueIDofSelect, it only has optionValue.

Anyway, you are asking for array of objects...

Then in the comment to michaels answer you say:

> It creates json object array. but I need only one json object.

So you don't want an array of objects?

What do you want then?

Please make up your mind.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVikasView Question on Stackoverflow
Solution 1 - JavascriptdonohoeView Answer on Stackoverflow
Solution 2 - JavascriptJosh StodolaView Answer on Stackoverflow
Solution 3 - Javascriptsystem PAUSEView Answer on Stackoverflow
Solution 4 - JavascriptGaurang JadiaView Answer on Stackoverflow
Solution 5 - JavascriptRene SaarsooView Answer on Stackoverflow