Generate json array with javascript

Question

I am looking to generate a json string based on the button selection on a html page.

<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>

<div id = "btnplatforms" class="btn-group">
<button type="button" id = "11" value="orange" class="btn btn-default">Orange</button>
<button type="button" id = "12" value="itunes" class="btn btn-default">iTunes</button>
<button type="button" id = "13" value="sfr" class="btn btn-default">SFR</button>
</div>

$(".btn").click(function() {
$(this).toggleClass('active');
});

Based on the active state of the button i want the result to be for example {Studios : Warner, Gaumont Platform : Orange, iTunes}

Is this possible to achive this with javascript? If yes how? Thanks in advance for your help.

abdelouahed touimi · Accepted Answer · 2015-04-01 16:47:37Z

3

You can try this :

   var btn_active_array = {
    "Studios" : [],
    "Platform":[]
   };


   $('#btnStudios .btn.active').each(function(index,btn_active){
       btn_active_array["Studios"].push($(btn_active).text());
   });
   $('#btnplatforms .btn.active').each(function(index,btn_active){
       btn_active_array["Platform"].push($(btn_active).text());
   });

jsfiddle link : https://jsfiddle.net/5kb5fdyz/

edited Apr 1, 2015 at 16:47

answered Mar 30, 2015 at 16:05

abdelouahed touimi

763 bronze badges

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

3 Comments

Tauseef Hussain Over a year ago

Thank you :) Could i also set the string to a default value? I want all the options to be selected if no selection is made.

abdelouahed touimi Over a year ago

yes : if( btn_active_array["Platform"].length == 0 ) btn_active_array["Platform"].push("default"); OR if( ! btn_active_array["Platform"].length) btn_active_array["Platform"].push("default");

Tauseef Hussain Over a year ago

Thank you so much :) Would you mind if i ask you to do the whole thing on a jsfiddle?? I might be asking for too much but i am pretty new to all this and still getting a hang of it. Thank you is Advance :)

jcubic · Accepted Answer · 2015-03-30 16:00:06Z

2

You can try this:

var output = {
    Studios: $('#btnStudios button.active').map(function() {
        return $(this).val();
    }).get(),
    Platform: $('#btnplatforms button.active').map(function() {
        return $(this).val();
    }).get()
};

here is jsFiddle.

answered Mar 30, 2015 at 16:00

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

4 Comments

Tauseef Hussain Over a year ago

Thank you so much @jcubic. However i am also looing for the default to be all select. I tried ** (! output.Studios) { output.Studios = ["warner","tf1","gaumont","pathe","studiocanal","francetv","m6snd"]** Could you tell me how do i go about it preferably with the jsfiddle. Much appreciated :)

Tauseef Hussain Over a year ago

Works perfect. Cant thank you enough. Hope to be atleast half as good as you someday :)

Tauseef Hussain Over a year ago

Hi @jcubic, I was trying to do the same with list items this time and i am unable to add it to the json string. I get the output as "Reports":[0,0]. I want to do the exact same operations on the list as we did for the buttons. I want shrOv to be the default instead of all selected. The HTML code is: <li id="sr" class="dropdown"> <ul class = "dropdown-menu"> <li value="shrOv"><a href = "#">Overview</a></li> <li value="shrTi"><a href = "#">Titles</a></li> </ul> </li> How would i go about this? Hoping to get an amazing way out from you as usual :)

jcubic Over a year ago

@TauseefHussain maybe value don't work with li element. Try to use .attr('value') or use data-value="shrOv" and .data('value')

Collectives™ on Stack Overflow

Generate json array with javascript

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related