Calling JSON once radio button selected

Question

Edit:

Json file containing called services.json:

{
"0": "Dog",
"1": "Cat",
"2": "Pony"
}

Html:

   <form class="form-horizontal">
                    <div class="form-group" id="radiobuttongroup">
                        <label for="inputservice" class="col-sm-2 control-label">Service</label>
                            <div class="radio">
                                <label>
                                <input type="radio" class="buttondog" name="optionsRadios" id="optionsRadios1" value="Dog">
                                Dog</label>
                            </div>
                        <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
                            <div class="radio">
                                <label>
                                <input type="radio" class="buttoncat" name="optionsRadios" id="optionsRadios2" value="Cat">
                                Cat</label>
                            </div>
                        <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
                            <div class="radio">
                                <label>
                                <input type="radio" class="buttonpony" name="optionsRadios" id="optionsRadios3" value="Pony">
                                Pony</label>
                            </div>
                        </div>
                    <span id="displayresults"></span>

Jquery im trying:

    <script type="text/javascript">
$(document).ready(function() {
     $('.buttondog').click(function(){
        $.ajax({
            url: "services.json",
            dataType: "text",
            success: function(data){
                var json = $.parseJSON(data);
                     $('#displayresults').html(json.dog);
                }
            });
        });
    });
</script>

I tried the code below but for some reason it wouldn't work. This seemed to cut a lot of the irrelevant script, but even this isnt working. I was then intending to make a script for each button using this method. What i wanted was that once the dog radio button was selected, 0 would display in the span, when cat, 1 and when pony 2.

Am i doing something completely wrong?

Thanks

Answer 1

I know that the topic is probably dead, but I think that your problem is in this line var json = $.parseJSON(data); $('#displayresults').html(json.dog); Your object doesn't have property 'dog', so you have to call it like json[1] or json['1'].

Answer 2

You can bind to the radio click event using jQuery, then match the value in the label (or change the radio value to the return value - ie 'Dog', 'Fish', 'Rabbit') and then use that to get your "results".

Example:

var data = {
  "result1": "Dog",
  "result2": "Fish",
  "result3": "Rabbit"
};

$('input[name="optionsRadios"]').click(function(){
    
    var radioVal = $(this).val(); // <-- if you change input val
    var labelVal = $(this).next('label').html(); //<-- get the label HTML
    
    // get the correct item from the data object
    $.each(data, function(k,v){
    
        if(v === labelVal){
        
          // added to results div
          $('#displaydata').html(k + " " + v);
          
        }
      
    });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="radiobuttongroup">
  <label for="inputservice" class="col-sm-2 control-label">Service</label>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="Dog"> <!-- <-- Changed value -->
      <label>Dog</label>
  </div>
  <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="Fish">
      <label>Fish</label>
  </div>
  <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="Rabit">
      <label>Rabbit</label>
  </div>
</div>
<div id="displaydata"></div>

[Edit - Info on JQuery .ajax()]

In your comment, your using jQuery's .getJSON() function. Per the documentation this is just the shorthand equivalent to:

// example:
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

... where:

Data [data] that is sent to the server is appended to the URL as a query string. If the value of the data parameter is a plain object, it is converted to a string and url-encoded before it is appended to the URL.

Please take a look at both the .getJSON() documentation [linked above] and .ajax() documentation.

Below is some pseudo-code that effectively describes how you could handle getting an ajax result and displaying it using jquery:

[Note - if you have further questions specific to ajax or need help troubleshooting your request, please open that topic as a new question and provide an example of what you've tried]

// psuedo code for ajax request

// setup:
// global variable for results object so it can be used by other functions
// inentionally left as 'undefined' for debugging:

var results;

// radio click event:
$('input[name="optionsRadios"]').click(function() {
  
  var radioVal = $(this).val();
  
  //see helper function below
  // adds response objec to 'results` variable
  getObject(radioVal);
  
  
  $('#displaydata').html(results);
  
});


// seperate function for ajax call
function getObject(id) {
  
  var reqData = { "id" : id };
  
  // fake ajax:
  $.ajax({
    dataType: "json",
    url: "/objContoller/",
    data: reqData,
    success: function(data){
      // here's where you handle success!
      // data can be accessed exactly how it was in the previous example
      // you can parse it and...
      // global variable assignment:
      
      results = JSON.parse(data);
      
      // or just return the json
      // results = data;
      
    },
    error: function(response){
      // always handle the error..
      // how you deal with this is based on server side code
      alert("this is just an example, so it will always throw this error!!! ID: " + id + " || reqData: " + JSON.stringify(reqData));
    }
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="radiobuttongroup">
  <label for="inputservice" class="col-sm-2 control-label">Service</label>
  <div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="Dog">
    <label>Dog</label>
  </div>
  <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
  <div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="Fish">
    <label>Fish</label>
  </div>
  <label for="inputservice" class="col-sm-2 control-label">&nbsp</label>
  <div class="radio">
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="Rabbit">
    <label>Rabbit</label>
  </div>
</div>
<div id="displaydata"></div>