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, Apr 21 '15 at 13:47
Can you post the enitre completed json, Because the one you post up is not a valid json — Anto king, Apr 21 '15 at 13:47
@user1477388 The ones I mentioned: 'Particulier' & 'Clienten en patienten' and 'Weekend' & 'Midweek' & 'Week' and so on.. — , Apr 21 '15 at 13:48
Have a look at http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json then. — Felix Kling, Apr 21 '15 at 13:51

score 2 · Accepted Answer · answered Apr 21 '15 at 13:52

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 '15 at 13:52

user1477388

20,790
32
144
264

I wanted it on all levels, your answer was really helpfull! Thanks! – Apr 21 '15 at 13:56
If you want it on all levels, then you should use recursion. – user1477388 Apr 21 '15 at 14:00

score 1 · Answer 2 · answered Apr 21 '15 at 14:00

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

score 1 · Answer 3 · answered Apr 21 '15 at 14:03

1

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

answered Apr 21 '15 at 14:03

Abhishek Mishra

81
5

populate select dropdown with keys from JSON array

3 Answers3

Edit: