dynamically create JSON array with .each()

Question

I'm trying to create a JSON array dynamically. In the site, there are a dynamic number of <div id="#selected">'s and I need to take all of their values and create a JSON array.

I've come across the .push() functionality, but I have not been able to figure it out.

<!-- there could be a million of these, or only one... each value is unique though -->
<div id="selected" value="5|3"></div>
<div id="selected" value="3|65"></div>


function json_array_selected() {

var JSon = {};
$('div#selected').each(function() {
        // let's first split the given values
        var Split = $(this).attr('value');
        Split = Split.split('|');
        var Type = Split[0];
        Value = Split[1];

        // now let's set up our Json array... using the value = type way, there should never be
        // any repeating 
        JSon.Value = Type;

});
return JSon;
}

Ids should be unique so $('div#selected') will only get you one element — Musa
– Musa, Commented Jul 9, 2012 at 22:33
Actually it does work jsfiddle.net/Ldm7U, but Ids should still be unique — Musa
– Musa, Commented Jul 9, 2012 at 22:43
If your ids aren't unique your html is invalid so even if it works as in Musa's fiddle I wouldn't count on it working in all browsers. Much better to use a class attribute to group similar elements. Also note that what you are creating is not JSON and not an array, it is simply an "object". (JSON is a string representation of data that happens to be in a format that looks like JS object literal syntax.) — nnnnnn
– nnnnnn, Commented Jul 9, 2012 at 22:57
how would I go about doing it via string then? I understand what JSON is more or less but I'm at a little loss as to HOW to make JSON dynamically via Jquery / JS — Jacob Kranz
– Jacob Kranz, Commented Jul 9, 2012 at 23:01

Fabrizio Calderan · Accepted Answer · 2012-07-09 22:32:52Z

6

instead of

JSon.Value = Type;

try with

JSon[Value] = Type;

or you will always overwrite a key named "Value"

answered Jul 9, 2012 at 22:32

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

Comments

devang · Accepted Answer · 2012-07-09 23:01:16Z

First of all, you cannot have two nodes in HTML with same id. You will have to assign some class for those div tags. For example -

&lt;div class="selected" value="5|3">&lt;/div>
&lt;div class="selected" value="3|65">&lt;/div>

I tried following piece of code on jsfiddle.net

function json_array_selected() {
  var JSon = {};
  $('div.selected').each(function() {
    // let's first split the given values
    var Split = $(this).attr('value');
    Split = Split.split('|');
    var Type = Split[0];
    Value = Split[1];
    JSon[Value] = Type;
  });
  return JSon;
}
var res = json_array_selected();
alert(JSON.stringify(res));
alert(res["3"]);

Resulting JSON array is

{"3":"5","65":"3"}

How would you write the code if you had multiple identical Value objects and didn't want them to be overwritten? For instance if you have "3|65" and "3|75", you'll overwrite the former.

Collectives™ on Stack Overflow

dynamically create JSON array with .each()

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related