how to show json by javascript to html

Question

hi I want a function like this! https://i.sstatic.net/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"}]

For starters, your code is incorrectly looking for data.CiytName... — Krease
– Krease, Commented Jun 10, 2013 at 2:46
Why are you doing 2 foreach loops? That appears wrong, also data.CiytName should be data.CityName. — Kyle Muir
– Kyle Muir, Commented Jun 10, 2013 at 2:46

PSL · Accepted Answer · 2013-06-10 02:51:41Z

2

All you need to do is this:

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

   });

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,
data is the original object (Not the object of this iteration)
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

edited Jun 10, 2013 at 2:51

answered Jun 10, 2013 at 2:46

PSL

124k21 gold badges257 silver badges243 bronze badges

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

3 Comments

CWLiou Over a year ago

thanks lot! Do you know about this $.each(data,function(_,ob) tutorial resource can I learn?

PSL Over a year ago

@劉承緯 Updated my answer with reference link. Did this resolve your issue?

Kyle Muir Over a year ago

+1 from me as well. Explained it perfectly.

Collectives™ on Stack Overflow

how to show json by javascript to html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related