How to return an object using jQuery, not only the value

Question

I'm looking for a way of replacing .val(); in jQuery with something like .array or .object. So instead of getting only the value of a drop down, i can return the full array for the selected value.

I have a drop down which allows a user to select multiple 'gameTypes', i'm outputting this to the screen and when the user clicks next the content of these 'gameTypes' should be sent as a JSON request.

The code i'm currently using is below however it only returns the 'gametype' name, so when i run the code i get 'RPG' in the console. What i need is the full object, so RPG, publishers, games etc.

Ive looked at the API documentation in jQuery and can't find a way of doing it, is it possible with jQuery?

Js Code:

$("#nextbutton").click(function () {
         var datatosend = {
             gametypes: [],
             market: [] //This is populated using the same method however i don't need the whole object, just the name so this works
         };
             $("#comboGameType").find(":selected").each(function() {
             var str = $(this).val();
             datatosend.gametypes.push(str);
             console.log(str);
         });

});

JSON example:

{
"games": [{
    "gameType": "RPG",
    "publishers": [{
        "publisher": "Square",
        "titles": [{
            "title": "Final Fantasy",
            "gameReleases": [ 2006, 2008, 2010, 2012, 2013, 2014 ]
        }]
    }]
}]
}

The html is pretty standard, it's populated through js

<select id="comboGameType" class="selectpicker" multiple> </select>

JS to handle changes to drop down and display selections:

$('#comboGameType').change(function () {
     var values = $('#comboGameType').val();
     var parsedData = JSON.parse($myData);
     for (var i = 0; i < values.length; i += 1) {
         $('#output').append("<div>" + values[i] + "</div>")
     }
 });

Heres a fiddle to show as an example - when you view console see the value of the drop down is returned, however i'm trying to return the FULL object (so everything in RPG for example) http://jsfiddle.net/2Ma7U/

So, what HTML are you working with?

David Thomas
– David Thomas

2014-04-02 10:00:49 +00:00
Commented Apr 2, 2014 at 10:00 — David Thomas
– David Thomas, Commented Apr 2, 2014 at 10:00
I think you must build the JSON array by yourself

TheGr8_Nik
– TheGr8_Nik

2014-04-02 10:05:35 +00:00
Commented Apr 2, 2014 at 10:05 — TheGr8_Nik
– TheGr8_Nik, Commented Apr 2, 2014 at 10:05
Added the HTML and js to handle the output

Hagbard
– Hagbard

2014-04-02 10:08:56 +00:00
Commented Apr 2, 2014 at 10:08 — Hagbard
– Hagbard, Commented Apr 2, 2014 at 10:08
please provide jsFiddle for the same

Dipali Vasani
– Dipali Vasani

2014-04-02 10:09:55 +00:00
Commented Apr 2, 2014 at 10:09 — Dipali Vasani
– Dipali Vasani, Commented Apr 2, 2014 at 10:09
jsfiddle.net/2Ma7U

Hagbard
– Hagbard

2014-04-02 10:18:35 +00:00
Commented Apr 2, 2014 at 10:18 — Hagbard
– Hagbard, Commented Apr 2, 2014 at 10:18

Nemoy · Accepted Answer · 2014-04-02 11:04:08Z

1

You can use jQuery data to store the entire object and retrieve it later.

$(parsedData.genres).each(function (i) {
     $("#pubCombo").append($("<option/>", {
         val: this.genre,
         html: this.genre,
         data: this
     }));
 });


$("#next").click(function () {
         var datatosend = {
             gametypes: [],
             market: []
         };
             $("#pubCombo").find(":selected").each(function() {
             var obj = $(this).data();
             datatosend.gametypes.push(obj);
             console.log(obj);
         });

});

Updated fiddle http://jsfiddle.net/2Ma7U/1/

answered Apr 2, 2014 at 11:04

Nemoy

3,4471 gold badge17 silver badges14 bronze badges

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

1 Comment

Hagbard Over a year ago

Thats great, many thanks Nemoy, looked everywhere for something to replace .val(), just didn't see data. Cheers!

Collectives™ on Stack Overflow

How to return an object using jQuery, not only the value

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related