populate select dropdown with keys from JSON array

Question

I have the following json-array available:

{
    "Particulier": {
        "Weekend": {
            "2015": {
                "04": [
                    {
                        "startDate": "24-04-2015",
                        "endDate": "27-04-2015",
                        "price": 1111
                    },
                    {
                        "startDate": "15-04-2015",
                        "endDate": "22-04-2015",
                        "price": 9999
                    },
                    {
                        "startDate": "17-04-2015",
                        "endDate": "24-04-2015",
                        "price": 0
                    }
                ],
                "05": [
                    {
                        "startDate": "01-05-2015",
                        "endDate": "04-05-2015",
                        "price": 2222
                    }
                ]
            },
            "2016": {
                "05": [
                    {
                        "startDate": "08-05-2016",
                        "endDate": "15-05-2016",
                        "price": 5555
                    },
                    {
                        "startDate": "15-05-2016",
                        "endDate": "22-05-2016",
                        "price": 6666
                    },
                    {
                        "startDate": "13-05-2016",
                        "endDate": "20-05-2016",
                        "price": 11111
                    }
                ],
                "04": [
                    {
                        "startDate": "24-04-2016",
                        "endDate": "27-04-2016",
                        "price": 1111
                    },
                    {
                        "startDate": "15-04-2016",
                        "endDate": "22-04-2016",
                        "price": 9999
                    },
                    {
                        "startDate": "17-04-2016",
                        "endDate": "24-04-2016",
                        "price": 0
                    }
                ]
            }
        },
        "Midweek": {
            "2015": {
                "04": [
                    {
                        "startDate": "20-04-2015",
                        "endDate": "24-04-2015",
                        "price": 3333
                    },
                    {
                        "startDate": "27-04-2015",
                        "endDate": "01-05-2015",
                        "price": 4444
                    }
                ]
            }
        }
    },
    "Clienten en patienten": {
        "Weekend": {
            "2016": {
                "01": [
                    {
                        "startDate": "08-01-2016",
                        "endDate": "11-01-2016",
                        "price": 7777
                    },
                    {
                        "startDate": "09-01-2016",
                        "endDate": "16-01-2016",
                        "price": 8888
                    }
                ]
            }
        }
    }
}

Is it possible to retrieve all the keys on the same level so they can be used by jQuery to populate a select dropdown.

With on the same level I mean : 'Particulier' & 'Clienten en patienten' and 'Weekend' & 'Midweek' & 'Week' and so on..

If any information is required please ask, new to this. Thanks in advance!

Yes it is. You just need to iterate and collect. Do you know how to iterate over the properties of an object? — Felix Kling
– Felix Kling, Commented Apr 21, 2015 at 13:47
Can you post the enitre completed json, Because the one you post up is not a valid json — Anto king
– Anto king, Commented Apr 21, 2015 at 13:47
@user1477388 The ones I mentioned: 'Particulier' & 'Clienten en patienten' and 'Weekend' & 'Midweek' & 'Week' and so on.. — user3481441
– user3481441, Commented Apr 21, 2015 at 13:48

user1477388 · Accepted Answer · 2015-04-21 13:52:00Z

2

Here is what I think you are trying to do:

http://jsfiddle.net/5wvLapox/

$.each( d, function( key1, value1 ) {
    console.log(value1);
    $.each( value1, function( key2, value2 ) {
       $('#put').append( $('<div></div>').html(key2) );
    });
});

Output:

Weekend 
Midweek

Edit:

Based on your comment, looks like you only want the first level:

http://jsfiddle.net/5wvLapox/2/

$.each( d, function( key1, value1 ) {
    $('#put').append( $('<div></div>').html(key1) );
});

Output:

Particulier
Clienten en patienten

answered Apr 21, 2015 at 13:52

user1477388

21.6k35 gold badges152 silver badges277 bronze badges

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

2 Comments

user3481441 Over a year ago

I wanted it on all levels, your answer was really helpfull! Thanks!

user1477388 Over a year ago

If you want it on all levels, then you should use recursion.

Anto king · Accepted Answer · 2015-04-21 14:00:22Z

1

HTML Code: <select id="DLState">

JS Part:

    var listItems= "";
$.each( datajson, function( key1, value1 ) {

    $.each( value1, function( key2, value2 ) {


        listItems+= "<option value='" + key2 + "'>" + key2 + "</option>";

    });

});
$("#DLState").html(listItems);

Try something like this demo Demo

answered Apr 21, 2015 at 14:00

Anto king

1,2221 gold badge13 silver badges26 bronze badges

Comments

Abhishek Mishra · Accepted Answer · 2015-04-21 14:03:10Z

1

Object.keys(jsonObject) will also help you to get keys and to list.

answered Apr 21, 2015 at 14:03

Abhishek Mishra

815 bronze badges

Collectives™ on Stack Overflow

populate select dropdown with keys from JSON array

3 Answers 3

Edit:

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit:

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related