0

Les explico: Tengo un archivo json donde tengo guardados varios objetos con los mismos atributos.

Ejemplo:

{"nombreElemento":"carpeta1","tipoElemento":"folder","fechaModificacion":"12/12/2012 00:45pm","fechaCreacion":"12/12/2012 01:45am","usuario":"jperez","tamanio":"5mb"}
{"nombreElemento":"carpeta2","tipoElemento":"folder","fechaModificacion":"12/12/2012 00:45pm","fechaCreacion":"12/12/2012 01:45am","usuario":"jperez","tamanio":"5mb"}

...

La cuestión es que necesito mostrar en una ventana modal esos atributos que tiene cada archivo , hice una petición ajax para leer ese archivo json que es donde están guardados las definiciones de los archivos, pero me trae todos los objetos que están dentro de ese archivo y necesito que solo me traiga la información del archivo al que le estoy dando click! Pienso que seria como comprobar el nombre del archivo donde doy click , enviarlo en la petición ajax y así compararlo con la información que viene de regreso

Les dejo el código del controlador.js

function detalleRegistro(){

    $.ajax({
        url:"ajax/detalle-archivo.php",
        dataType:"json",
        data:"../data/home.json",
        success:function(respuesta){
            $("#modal-detalle").modal("show");
            console.log("La respuesta del servidor es: ");
            console.log(respuesta);
            for(var i=0;i<respuesta.length;i++){
                if (respuesta[i].tipoElemento==='data'| respuesta[i].tipoElemento==='imagen' | respuesta[i].tipoElemento==='pdf' | respuesta[i].nombreElemento==='word' ) {
                    $("#tabla-informacion").append(`<tr>
                    <th>Nombre Elemento </th>
                    <td>${respuesta[i].nombreElemento}</td>
                  </tr>
                  <tr>
                    <th>FechaCreacion</th>
                    <td>${respuesta[i].fechaCreacion}</td>
                  </tr>
                  <tr>
                    <th>FechaModificacion</th>
                    <td>${respuesta[i].fechaModificacion}</td>
                  </tr>
                  <tr>
                    <th>Usuario</th>
                    <td>${respuesta[i].usuario}</td>
                  </tr>
                  <tr>
                    <th>Tamanio</th>
                    <td>${respuesta[i].tamanio}</td>
                  </tr> `);
                } 

            }
        },
        error:function(error){
            console.log(error);
        }
    });      
}

Les adjunto la imagen de la vista de la pagina , el codigo que la genera es desde una peticion ajax que lee un Json , si se fijan al darle click a cualquier file me sale los detalles de todos los files , y necesito que solo sea del que le doy click Gracias de Antemano.

2
  • Lo que puedes hacer es, si dices que te tiene que mostrar la info dependiendo del botón al que le des click, podrías pasar el nombre de la carpeta a tu función detalleRegistro, y así buscar ese valor en el objeto de tu respuesta Ajax y ese resultado mostrarlo en tu modal. Lo puedes hacer con los métodos .filter o .find que si no mal recuerdo te regresan un arreglo entonces te regresaría solo un valor.
    – Isaac
    Commented el 10 abr. 2019 a las 7:46
  • entiendo , te ensenho el codigo y lo que hace , haber que piensas. He editado el post , para que lo mires. Commented el 10 abr. 2019 a las 13:11

1 respuesta 1

0

No deberías de manejar un JSON sin un ID, al menos en este tipo de casos. El ID es indispensable en la mayoría de respuestas para poder manejar la información del lado del front y es un valor que no debe de ser repetido en la entidad (Tabla) o en este caso, en tu JSON.

De hecho, si buscas ejemplos de JSON, la mayoría van a traer consigo un ID. Puedes ver lo que te digo en está página o en está otra página.


Dicho esto, deberías ir a tu archivo JSON y hacer el cambio a un array de objectos de la siguiente manera y añadir el ID.

[{"id": 1, "nombreElemento":"carpeta1","tipoElemento":"folder","fechaModificacion":"12/12/2012 00:45pm","fechaCreacion":"12/12/2012 01:45am","usuario":"jperez","tamanio":"5mb"},
{"id": 2, "nombreElemento":"carpeta2","tipoElemento":"folder","fechaModificacion":"12/12/2012 00:45pm","fechaCreacion":"12/12/2012 01:45am","usuario":"jperez","tamanio":"5mb"}]

Te dejo un snippet que acabo de hacer para que te des una idea.

let detailsFiles = [{"id": 1, "nombreElemento":"carpeta1","tipoElemento":"folder","fechaModificacion":"12/12/2012 00:45pm","fechaCreacion":"12/12/2012 01:45am","usuario":"jperez","tamanio":"5mb"},
{"id": 2, "nombreElemento":"carpeta2","tipoElemento":"folder","fechaModificacion":"12/12/2012 00:45pm","fechaCreacion":"12/12/2012 01:45am","usuario":"jperez","tamanio":"5mb"}]; //Mi archivo JSON
console.log(detailsFiles); //Muestro en consola.

let fileID = 1; //El ID del archivo que deseo buscar.
var found = detailsFiles.find(function(element) {
  return element.id == fileID; //Si el ID del archivo que deseo buscar es el mismo id del element que estoy recorriendo, lo guardo en la variable found.
});

let convertJSONtoString = JSON.stringify(found); //Convierte el JSON de la variable found  a string.
document.getElementById('detailOneFile').innerHTML = convertJSONtoString; //Añado el JSON string al body del HTML
<div id="detailOneFile"></div>

Y otro snippet que podrías usarlo en tu código, acorde a tu lógica.

function detalleRegistro(fileID){
  let detailsFiles = [{"id": 1, "nombreElemento":"carpeta1","tipoElemento":"folder","fechaModificacion":"12/12/2012 00:45pm","fechaCreacion":"12/12/2012 01:45am","usuario":"jperez","tamanio":"5mb"},
  {"id": 2, "nombreElemento":"carpeta2","tipoElemento":"folder","fechaModificacion":"12/12/2012 00:45pm","fechaCreacion":"12/12/2012 01:45am","usuario":"jperez","tamanio":"5mb"}]; 

  var found = detailsFiles.find(function(element) {
    return element.id == fileID;
  });

  let convertJSONtoString = JSON.stringify(found); 
  
  document.getElementById('detailOneFile').innerHTML = convertJSONtoString; 
  document.getElementById('nameFile').innerHTML = found.nombreElemento;
  document.getElementById('typeFile').innerHTML = found.tipoElemento;
  document.getElementById('modifiedDateFile').innerHTML = found.fechaModificacion;
  document.getElementById('createdDateFile').innerHTML = found.fechaCreacion;
  document.getElementById('user').innerHTML = found.usuario;
  document.getElementById('size').innerHTML = found.tamanio;

}
div {
  margin:10px 0;
}
<button class="getFile" onClick="detalleRegistro(1);">Boton archivo 1</button>
<button class="getFile" onClick="detalleRegistro(2);">Boton archivo 2</button>

<div id="detailOneFile"></div>

<div id="nameFile"></div>
<div id="typeFile"></div>
<div id="modifiedDateFile"></div>
<div id="createdDateFile"></div>
<div id="user"></div>
<div id="size"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • Excelente Al final me sirvió la lógica del ID , sólo pase el nombre por la función detalleregistro('${nombreElemento}'); y en el controlador utilice ese parámetro para comprar y poner la que necesitaba , también cambie el .append por .html para me sobreescribiera los datos de cada archivo. Commented el 10 abr. 2019 a las 19:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.