Fill JSON Data to a Select Form

Question

Form:

<select name="apps[]" class="selecter" multiple>
    <optgroup label="App Name">
        <option value="1|1">App Name : Category</option>
        <option value="1|2">App Name : Category</option>
        <option value="1|3">App Name : Category</option>
    </optgroup>
</select

I have a JSON Object (This is how it looks with console log)

{"apps":[{"value":"1|1","app_name":"Appen","member_name":"Riven"},{"value":"1|2","app_name":"Appen","member_name":"Filler"},{"value":"1|3","app_name":"Appen","member_name":"Mello"}]} 


console.log(JSON.stringify(data) );

And I want to fill the form with the json data I have above in the form, where App Name is "app_name", "member_name" is "Category" and value is obviously the value.

This json object can also contain more than one "app" which means that, it may look like this as a end result:

<select name="apps[]" class="selecter" multiple>
    <optgroup label="App Name">
        <option value="1|1">App Name : Category</option>
        <option value="1|2">App Name : Category</option>
        <option value="1|3">App Name : Category</option>
    </optgroup>
    <optgroup label="App Name 2">
        <option value="2|1">App Name 2 : Category</option>
        <option value="2|2">App Name 2 : Category</option>
    </optgroup>
</select>

The Form has already been generated with other data, that's why I need to replace it, rather than build it from the start (the json call is done later)

I guess I need to use some loop to go through each item somehow,

I tried with:

    $( data ).each(function( value, etc ) {

            console.log(value);
            console.log(etc);

        });

However it gives me some weird result:

Object {apps: Array[3]}
apps: Array[3]
0: Object
1: Object
2: Object
length: 3
__proto__: Array[0]
__proto__: Object

How can I fill the form like above with the data given (JSON)?

Succeeded to loop through :

for(var i=0; i<data.apps.length; i++){
console.log(data.apps[i]);
}

I gave the "select" a id, so I can remove all the contents:

        if (data.apps.length > 0) {

            $('#selectapps').html(' ');

            for(var i=0; i<data.apps.length; i++){

            }
        }

You mean something like this? http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery — Gavin, Mar 17 '14 at 10:52

score 0 · Answer 1 · answered Mar 17 '14 at 10:41

0

This is how you loop through your json object data:

$.each(result.apps, function(i, item) {
     console.log(item.value);
     console.log(item.app_name);
     console.log(item.member_name);
});

answered Mar 17 '14 at 10:41

Wilmer

448
2
4

score 0 · Answer 2 · answered Mar 17 '14 at 10:56

The iteration function you use has a couple of flaws. First $().each is designed to iterate over jQuery Objects (usually generated from the DOM), but you deal with a regular object. Thus, $.each is better (see https://api.jquery.com/jQuery.each/).

Now, you don't want to iterate over the whole data object, but only the apps. Thus, the following should work better:

$.each(data.apps, function (index, value) {
    console.log(value.value);
    console.log(value.app_name);
    console.log(value.member_name);
});

Based on this you can then create your form.

Rough draft you can find here: http://jsfiddle.net/yCxDn/1/

I think you should be able to figure out the details from that.

Fill JSON Data to a Select Form

2 Answers2