How to use getJSON with this code

Question

I just got this chained select box working that uses JSON data to populate the options. Fiddle. The data is hard-coded, but I want to load the data using the $.getJSON() method, but I can't get the code right. I think the suggest.json file is triggered, but something else seems to be causing the problem. Would anyone please show me how to fix the problem?

I got the The Drop down Box from this site

The original code:

<script type="text/javascript">

var s = '[{"Box1":"Africa","CODE":1,"ID":"A"},{"Box1":"Asia","CODE":2,"ID":"B"},{"Box1":"South America","Code":3,"ID":"C"}]';


var jsonData = $.parseJSON(s);

var $select = $('#mySelectID');
$(jsonData).each(function (index, o) {    
    var $option = $("<option/>").attr("value", o.CODE).text(o.Box1 + "|" + o.ID);
    $select.append($option);
});

jQuery("#mySelectID").dynamicDropdown({"delimiter":"|"});

</script>

Here's my failed attempt:

  <script type="text/javascript">

  $.getJSON('suggest.json', function(data){

  var $select = $('#mySelectID');

  $.each(data, function (index, o) {

  var $option = $("<option/>").attr("value", o.CODE).text(o.Box1 + "|" + o.ID);
    $select.append($option);
  });

  });
  jQuery("#mySelectID").dynamicDropdown({"delimiter":"|"});
  </script>

Suggest.JSON:

[{"Box1":"Africa","CODE":1,"ID":"A"},{"Box1":"Asia","CODE":2,"ID":"B"},{"Box1":"South America","Code":3,"ID":"C"}]

@Evgeniy I'm getting the file from the same domain. And It seems to be triggered fine. Please hold on a minute. I'm setting up two examples, one having data hardcoded, one using the getJSON method. — RedGiant
– RedGiant, Commented Feb 17, 2014 at 10:58
@anurupr I set up two examples. Example: original ||| getJSON Example I don't see any error other than a warning in the original one (hardcoded) event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Other than that, it's working fine. — RedGiant
– RedGiant, Commented Feb 17, 2014 at 11:01
I tested your code, all work except jQuery("#mySelectID").dynamicDropdown({"delimiter":"|"}); Try jQuery("#mySelectID").show(); too see it — Farkhat Mikhalko
– Farkhat Mikhalko, Commented Feb 17, 2014 at 11:12

Hugo Gresse · Accepted Answer · 2014-02-17 11:11:33Z

1

The problem is that you haved to call $("#mySelectID").dynamicDropdown({"delimiter":"|"}); only when getJSON return you the data.

According to your code, just swap the plugin call :

$(document).ready(function(){
    $.getJSON('my.json', function(data){

        var $select = $('#mySelectID');

        $.each(data, function (index, o) {
            var $option = $("<option/>").attr("value", o.CODE).text(o.Box1 + "|" + o.ID);
            $select.append($option);
        });

        $("#mySelectID").dynamicDropdown({"delimiter":"|"});

    });
});

By the way, you have an error with your json : the last item (South America) have "Code" and note CODE" according to the others

answered Feb 17, 2014 at 11:11

Hugo Gresse

18k10 gold badges84 silver badges122 bronze badges

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

Collectives™ on Stack Overflow

How to use getJSON with this code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related