Converting json data to select drop down options

Question

This is my data being returned from ajax call (EDIT: json format now):

[{"PROCEDURE_ID":362183,"PROCEDURE_NAME":"Biopsy, Breast; Lumpectomy"}, {"PROCEDURE_ID":558975,"PROCEDURE_NAME":"Biopsy, Cervix"},{"PROCEDURE_ID":558977,"PROCEDURE_NAME":"Biopsy, intrauterine"},{"PROCEDURE_ID":558976,"PROCEDURE_NAME":"Biopsy, Libial"}]

I am trying to put this in a select drop down and no matter what I do, it fails, either select-options are undefined or jquery throw error.
This is what I have tried so far 2 different methods (selField is dynamic element)

success: function(json){

         if (json != '' )
            var vx='<option value="">All</option>';
               $.each (json.DATA, function(k, v){

                   vx+='<option value="'+k.Procedure_ID+'">'+v.Procedure_Name+'</option>';
               });
               $(selField).html(vx);
               }

Why not just return the data as JSON instead of WDDX? Adding `returnformat="json"` to remote CFC call will do that. — Scott Stroz, Apr 17 '14 at 14:08
I tried that initially. But still found it difficult to put that as Options of the select box. The code inside success function was for that. And I also used $.each (res.DATA, function(k, v), it would throw jquery error. I am all game, I can change it to json format, but problem I am finding is to convert that data to select-options — CFML_Developer, Apr 17 '14 at 14:13
Then you either have an issue with your jQuery code, or an error in your CF code. — Scott Stroz, Apr 17 '14 at 14:18
Modified the question (Thanks Scott, guess json would be better to handle), now I am getting json format from CFC, but select option part still not working. Any suggestion what I could be doing wrong? — CFML_Developer, Apr 17 '14 at 14:32
Yes, the data returned is all caps `PROCEDURE_ID` but your variables are not `Procedure_ID`. I bet the error is saying something about k.Procedure_ID not being defined. — Scott Stroz, Apr 17 '14 at 14:44
You are also specifying the incorrect argument for `PROCEDURE_ID`. You should be using `v` instead of `k`. In your `each` iterator the first argument of the function `k` is the index, the second argument `v` is the element. See [this fiddle](http://jsfiddle.net/rshqy/) to see what I mean. — Miguel-F, Apr 17 '14 at 15:06
Thanks Miguel. That was just the typo (using k instead of v, I rely on key-value pair, but I tried everything used k too). But major thing was that JSON parse, which I think allowed it understand the string as proper JSON. It is working now. Thanks again. — CFML_Developer, Apr 17 '14 at 15:19
You did not include all of your code but if you set the `dataType` of your AJAX call to `JSON` then it will parse it for you automatically (assuming that it is properly formatted json). [More on that here](http://stackoverflow.com/q/5289078/1636917) — Miguel-F, Apr 17 '14 at 15:34

score 3 · Accepted Answer · edited May 23 '17 at 11:57

There are a couple of things wrong that I see from the code you posted. First, as Scott Stroz mentioned, you are referencing the JSON data in your .each loop using camel case but the JSON data actually has it in all UPPER case. JavaScript is case sensitive so that needs to match. Secondly, you are referencing PROCEDURE_ID using the wrong argument in your .each loop. The first argument of the function (k in your code) is the loop index. The second argument (v in your code) is the element data. So you need to reference both PROCEDURE_ID and PROCEDURE_NAME using the v argument like so:

vx+='<option value="'+v.PROCEDURE_ID+'">'+v.PROCEDURE_NAME+'</option>';

From the comments it also appears that you were not parsing the JSON response either. That would keep the .each loop from iterating. You can do so by using either JSON.parse() or by defining the dataType of your AJAX call to be 'json' assuming that it is properly formatted.

I created a simple jsFiddle to show you how the .each iteration of your JSON object should work.

Converting json data to select drop down options

1 Answers1