How to obtain a specific data of a Json with ajax and jsp?

Question

How to obtain a specific data of a Json with ajax and jsp?

Navigation

#1 by (0 votes)

1

I have a table with different products, and this list is obtained with ajax, data in json format and I show it in a datatable. I have a modify button for each product which opens a modal with the fields that can be modified, what I want is that when you click on that modify button, the modal with the product data will be opened as a value in the input but I do not get the result I want.

Ajax code with which I get a query from the DB. If you observe, I am going to a servlet (EditInv) which makes the connection and makes a selection to the table with a specific id

$(document).on('click', '.modalEditar', function () {
        idLibro = $(this).attr("id");
        idLibro = idLibro.replace(/[']/g, "");
        $.ajax({
            method: "POST",
            url: "../EditarInv",
            dataType: "json",
            data: 'id=' + idLibro,
            success: function (data) {                    
                $('#nombreEdit').html(data);
                console.log(data);
            }
        });
    });

example result of what the console.log (data) brings to me.

{
    "datos": [{
        "id": "1",
        "nombre": "El hobbit",
        "descripcion": "Smaug parecía profundamente dormido cuando Bilbo espió una vez más desde la entrada. ¡Pero fingía",
        "categoria": "1",
        "cantidad": "91",
        "precio": "150.00"
    }]
}

my modal in a jsp

<div class="modal fade" id="myModalEditar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Modificar libro</h4>
                        </div>
                        <form accept-charset="utf-8" method="POST" id="crearLibro" enctype="multipart/form-data">
                            <div class="modal-body">

                                Nombre:
                                <input type="text" id="nombreEdit" name="txtNom" class="form-control" value=""/><br>

                                Descripcion:
                                <textarea name="txtDesc" id="descripcion" class="form-control" value=""></textarea><br>       

                                categoria:
                                <select name="txtCate" id="categoria" class="form-control">
                                    <option value="">Seleccione una opcion</option>
                                    <option value="0">Fantasia</option>
                                    <option value="1">Terror</option>
                                    <option value="2">Aventura</option>
                                    <option value="3">Drama</option>
                                </select><br>

                                Cantidad:
                                <input type="text" id="cantidad" name="txtCant" class="form-control" value=""/><br>                        

                                Precio:
                                <input type="text" id="precio" name="txtPre" class="form-control" value=""/><br>

                                Imagen:
                                <input type="file" id="imagen" name="txtImg" class="" value=""/><br>

                            </div>
                            <div class="modal-footer">
                                <a type="button" class="btn btn-default" data-dismiss="modal">Cerrar</a>
                                <button type="submit" class="btn btn-primary" id="guardar">Agregar Libro</button>
                            </div>
                        </form>

                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>

I get the data I want in json format but I have not been able to take that data and pass it to the modal input since it marks me [objet objet]. I do not know if I'm doing it the right way or if you have any idea of how to make the data appear in the form of the modal, I thought that maybe there could be a way to get the data directly from the datatable and not make a query with ajax but I have not found a solution.

jquery json ajax jsp

asked by Alejandro Canchola 12.11.2018 в 08:34

source

1 answer

does anyone know how to assign a fetch_assoc () or a mysqli_fetch_array () to a variable? Share variable in Laravel controller

score 0 · Accepted Answer

You need to go through the objects and the arrays. When you need an object you use .objeto to get that data and when it is an array, as usual, you look for its position.

var id = data.datos[0].id;
var nombre = data.datos[0].nombre;
var descripcion = data.datos[0].descripcion;
var categoria = data.datos[0].categoria;
var cantidad= data.datos[0].cantidad;
var precio = data.datos[0].precio;

Then it only remains to add the values to the input.

$('#nombreEdit').val(nombre);
$('#descripcion').val(descripcion);
$('#categoria').val(categoria);