Filling out Combobox Using JSON value

Question

Hello I have a following html

<select id="fld_base_profile_id" defaultValue="-1" class="m-wrap span10" field="fld_base_profile_id" appEditor="true"></select>

I have this in my ajax

$result['analyze_type'][]   = array ("id" => $row[idatabase::FIELD_ID], "name" => $row[idatabase::FIELD_PROFILE_NAME]);
echo json_encode($result);

and in js part (by the way i'm using Prototype.js) :

var JSON    = transport.responseText.evalJSON();

In console, my JSON.analyze_type looks like this

Array[1]
0: Object
id: "939"
name: "Reaktif İndüktif Kontrolü Ana Profili"

The question is, how can i parse this JSON data so it can change my html like

<option value="id">name</option>  ??

EDIT: Solution:

this.baseProfile    = $("fld_base_profile_id");

var JSON    = transport.responseText.evalJSON();
    this.type   = JSON.analyze_type;
    for(var i = 0; i < JSON.analyze_type.length; i++) {
        var profile = JSON.analyze_type[i];
        var opt     = document.createElement("option");
        opt.value   = profile.id;
        opt.text    = profile.name;
        this.baseProfile.appendChild(opt);
    }

andbas · Accepted Answer · 2013-10-24 08:10:55Z

2

Try this

var el = document.getElementById('fld_base_profile_id');

for(var i = 0; i < JSON.length; i++) {
    var profile = JSON[i],
        opt = document.createElement("option");

    opt.id = profile.id;
    opt.value = profile.name;
    el.appendChild(opt);
}

answered Oct 24, 2013 at 8:10

andbas

6015 silver badges8 bronze badges

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

3 Comments

FreshPro Over a year ago

Thanks a lot! I made some modifications based on your code and it works like a charm

andbas Over a year ago

Nice to hear, please let me know if the code have any mistakes, I'll fix it.

andbas Over a year ago

Sorry, that is my fault. I didn't notice that analyze_type is root object of your json.

Geek Num 88 · Accepted Answer · 2013-10-24 14:43:11Z

1

You could do it in a much cleaner way

Firstly make sure you are passing the Content-Type: application/json header in your JSON response - All of the Ajax methods in Prototype will automatically process the response as JSON and put it into transport.responseJSON

Then your javascript can clean up to this

this.baseProfile    = $("fld_base_profile_id");

var type = transport.responseJSON.analyze_type;

type.each(function(item){
    var option = new Element('option',{'value':item.id}).update(item.name);
    this.baseProfile.insert(option);
},this);

answered Oct 24, 2013 at 14:43

Geek Num 88

5,3102 gold badges24 silver badges37 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:31:46Z

0

You can use JSON.Parse to turn the JSON you get into an object. then you can loop over the items, assign each one to an <option> object and then append them to the select.

JavaScript - populate drop down list with array explains how to create the option tags.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Oct 24, 2013 at 7:59

Nzall

3,5855 gold badges36 silver badges65 bronze badges

Collectives™ on Stack Overflow

Filling out Combobox Using JSON value

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related