JSON multi-value

Question

i need help parsing the following:

{
  "data": [
    {
      "Function": "Administration",
      "SubFunction": "Facilities,Maintnce,Bldg Svcs,Other,Secretary"
    },
    {
      "Function": "Communications",
      "SubFunction": "Internal Communications,Marketing Comm,Other"
    },
    {
      "Function": "Customer_Services",
      "SubFunction": "Customer Engineer,Dispatcher,NonQuota Acct Supp Mgr,Other,PreSales-Network,Process and Systems,Quota Acct Supp Mgr,Remote Support Services,Rework,Service Offer Development,Services Logistics,Services Planning,Technology Consultant"
    }
  ]
}

My jQuery code is:

                $select3.html('');
                $select4.html('');
                $.each(data.data, function(key, val){
                  $select3.append('<option id="' + val.Function + '">' + val.Function + '</option>');
                  $.each(this.SubFunction, function(){
                    $select4.append('<option id="' + val.SubFunction + '">' + val.SubFunction + '</option>');
                    })
                })

What should happen: The first option box should be filled with the "Function" and the second with the "SubFunction" upon the "Function" selection.

What is happening: The first option box does load up the "Function" values correctly, but the second drop down has all of the "Subfunction" from all "Function" with multiple instances of them.

Please help.

Thank You.

Are you trying to parse SubFunction value to create an array from it to add each word (like 'Facilities', 'Maintnce' and etc.) as a separate <option>? — Sergey Malyutin
– Sergey Malyutin, Commented Sep 30, 2014 at 16:01
You'll need a change event handler, so that the second dropdown values can be replaced whenever the first dropdown is changed. You'll also need to split the SubFunction string into separate values. I'll put together an answer if I get a chance. — Shai
– Shai, Commented Sep 30, 2014 at 16:02

Martin Denk · Accepted Answer · 2014-09-30 16:08:37Z

3

You need a change handler for this. This should do the job:

$select3 = $('#select3');
$select4 = $('#select4');
$.each(data.data, function() {
    addOption($select3, this.Function);
});

$.each(data.data[0].SubFunction.split(','), function() {
    addOption($select4, this);
});

$select3.on('change', function() {
    $select4.html('');

    $.each(data.data, function() {
        if ($select3.val() === this.Function) {
            $.each(this.SubFunction.split(','), function() {
                addOption($select4, this);
            });
        }
    });
});

function addOption($target, value) {
    $target.append('<option id="' + value + '">' + value + '</option>');
}

http://jsfiddle.net/m88u76eL/

answered Sep 30, 2014 at 16:08

Martin Denk

5544 silver badges14 bronze badges

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

5 Comments

Olajide Olaolorun Over a year ago

For some reason it only works for the first "Function". After selecting another "Function" like "Communications" there is no drop down for select4.

Martin Denk Over a year ago

Hmm, it works fine for me. When I pick a "Function", $select4 is updated accordingly.

Olajide Olaolorun Over a year ago

Not on jsfiddle. After adding it to my code. Thats what happens for some reason. Shouldnt have anything to do with the json file being called and not in the same file should it? Thank you.

Martin Denk Over a year ago

As far as I can tell, this can only happen if $select3.val() === this.Function never returns true. Maybe this helps as a pointer!

Olajide Olaolorun Over a year ago

Hey Martin, could you help with this please: stackoverflow.com/questions/26243873/…

PeterKA · Accepted Answer · 2014-09-30 18:18:28Z

2

DEMO

Here is how to do it. You could use a data attribute to store the options for each function in the the option elements of select3, then when each of these options is selected, the value in the data attribute is read and parsed and used to populate select4 on-the-fly.

$select3.empty();
$.each(data.data, function(key, val){
    $select3.append(
        $('<option/>',{id:val.Function,text:val.Function,'data-sub-function':val.SubFunction})
    );        
});

$(function() {
    $select3.on('change',function() {
        $select4.empty();
        $.each($('option:selected', this).data('sub-function').split(','), function(i,val){
            $select4.append(
                $('<option/>', {id:val,text:val})
            );
        });
    })
    .change();
});

edited Sep 30, 2014 at 18:18

answered Sep 30, 2014 at 16:09

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

17 Comments

Olajide Olaolorun Over a year ago

I get a "Uncaught TypeError: Cannot read property 'split' of undefined"

PeterKA Over a year ago

My bad! please see correction above ... changed $(this) to $('option:selected', this). It should work now ... will add .change() so it will populate by default too.

Olajide Olaolorun Over a year ago

Works now, but i still get the same error. Which i believe breaks it in IE.

PeterKA Over a year ago

By same error do you mean the Uncaught TypeError: Cannot read property 'split' of undefined? How is that possible?

Olajide Olaolorun Over a year ago

Yes, on this line: $.each($('option:selected', this).data('sub-function').split(','), function(i,val){

|

Sebastien B. · Accepted Answer · 2014-09-30 15:59:07Z

0

You are already looping in data Object why are you doing a extra $.each ?

                $select3.html('');
                $select4.html('');
                $.each(data.data, function(key, val){
                  $select3.append('<option id="' + val.Function + '">' + val.Function + '</option>');

                    $select4.append('<option id="' + val.SubFunction + '">' + val.SubFunction + '</option>');

                });

This just work just find? Not tested tho just a quick post to help out

answered Sep 30, 2014 at 15:59

Sebastien B.

4913 silver badges10 bronze badges

1 Comment

Angad Over a year ago

What he wants is to have 2 select boxes. First one has all 'Function' properties. Upon selection of an option in the Functions selectbox, a second dropdown should get populated with all its 'SubFunctions'

Collectives™ on Stack Overflow

JSON multi-value

3 Answers 3

5 Comments

17 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

17 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related