how to show json by javascript to html

Question

hi I want a function like this! http://i.stack.imgur.com/p61fq.png

when I select the first "select tag"

the secoud "select tag" show undefined

but in this picture the CONSOLE area is exactly show what I want.

My problem is...how to show the data in second "select tag"?

I think it's something wrong in my javascript.

$.ajax({
    type: "POST",
      url: "dropdownServlet",
      data: dataString,
      dataType: "json",
      success: function( data, textStatus, jqXHR) {
          $("#dropdown2").html("");
            $.each(data, function(){
                $.each(this,function(){
                    $("#dropdown2").append("<option>"+data.CiytName+"</option>");   
                });
            });            
     },

and this's my json data

[{"CityId":"4","CityName":"Vancouver"},{"CityId":"5","CityName":"Toronto"}]

Answer 1

All you need to do is this:

    $.each(data, function(_, ob){
        $("#dropdown2").append("<option>"+ob.CityName+"</option>");   

   });    

1. Since your data is already [{"CityId":"4","CityName":"Vancouver"},{"CityId":"5","CityName":"Toronto"}] you just need to use one level of $.each iteration and data.CiytName has 2 issues,
2. data is the original object (Not the object of this iteration)
3. CiytName has a typo.

Just my suggestion not to append in the $.each loop iteration to reduce the number of DOM operations especially when you have huge data in your json to be appended as option.

      var select = $('<select/>'); //Create a temp element.
        $.each(data, function(){
                select.append("<option>"+ob.CityName+"</option>");   //append to the temp element 
         });       

        $("#dropdown2").html(select.html());  //finally fill in the dropdown with your latest options.

Refer $.each