Get the id of a query in jquery Api Rest

Question

Get the id of a query in jquery Api Rest

Navigation

#1 by (0 votes)

0

I have this jquery script that brings a json hosted in a rest api

$( document ).ready(function() {

    $.ajax({
        url: "http://localhost/api_megacable/cable",
        data: "{}",
        dataType: "json",
        type: "GET",
        contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                $.each(data, function(index, data){
                    $("#television").append("<td>id:"+data.id+"<input type='radio' class='rbtelevision' value='"+data.id+"'></td>");
                })
            },
            error: function (response) {
                alert("error al cargar el carusel");
                console.log(response);
            },
            failure: function (response) {
                alert("failure");
                console.log(response);
            }
    });
$("#registro").click(function(){
        alert("has hecho click");
        var television = $(".rbtelevision").val();
        console.log(television);
    });

});

throws this json

[{"id":"3","nombre":"Basico Plus Digital","numero_canales":"135","numero_musica":"50","precio":null},{"id":"4","nombre":"Basico Digital + HD Total","numero_canales":"190","numero_musica":"50","precio":null},{"id":"6","nombre":"Basico Digital","numero_canales":"119","numero_musica":"50","precio":null}]

In the view it does not matter which value you select, it always throws me the first value on the 3

jquery html angularjs api

asked by Esteban Flores 02.02.2017 в 21:02

source

1 answer

How to change the storyboard correctly? no implicit conversion of Symbol into Integer (RAILS)

score 0 · Accepted Answer

There are 2 errors:

You are using the .rbtelevision selector, which is associated with 3 elements and the .val() method, only returns the value of the first one.
At input radio you are not assigning them a name , which causes you to be able to select more than one.

Solution:

Use the pseudo :checked class to get only the input checked.

$("#registro").click(function(){
  var television = $(".rbtelevision:checked").val();
  console.log(television);
});

Assign, for example name='television' , to input .

$.each(data, function(index, info){
  $("#television").append("<td>id:"+info.id+"<input type='radio' name='television' class='rbtelevision' value='"+info.id+"'></td>");
});

Demo:

var data = [{"id":"3","nombre":"Basico Plus Digital","numero_canales":"135","numero_musica":"50","precio":null},{"id":"4","nombre":"Basico Digital + HD Total","numero_canales":"190","numero_musica":"50","precio":null},{"id":"6","nombre":"Basico Digital","numero_canales":"119","numero_musica":"50","precio":null}];

$.each(data, function(index, info){
  $("#television").append("<td>id:"+info.id+"<input type='radio' name='television' class='rbtelevision' value='"+info.id+"'></td>");
});

$("#registro").click(function(){
  var television = $(".rbtelevision:checked").val();
  console.log(television);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="television"></tr>
  </tbody>
</table>
<button id="registro">Registro</button>