0
174
Vistas¿Cómo obtener datos del archivo json y mostrarlos en html?
Tengo una base de datos JSON con información que me gustaría autocompletar en mi JavaScript/HTML si se encuentra un elemento particular en la matriz. Tengo un evento de controlador, onchange para escuchar si se encuentra ese elemento en particular, imprime toda la información de esa matriz en particular. Lo imprimí en la consola, pero ¿cómo haría para imprimir esto en mis secciones HTML relevantes?
JavaScript:
const getAssetInfo = id => { $.get( "http://localhost:3000/assets/" + id, function( data ) { console.log(data); }); } $('document').ready(() => { <td><input id='asset_tag_no${count}' type='text' onchange = "getAssetInfo(this.value);" bottom required /></td> <td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td> <td><textarea id='description${count}' type='text' bottom required description></textarea></td> } let data = []; // Store all Info from this row let assetInfo = { asset_tag_no: $(`#asset_tag_no${i}`).val(), manufacturer: $(`#manufacturer_serial_no${i}`).val(), descriptions: $(`#description${i}`).val(), costs: $(`#cost${i}`).val(), po_no: $(`#po_no${i}`).val(), remarks: $(`#remarks${i}`).val(), } }JSON en la base de datos
{ "assets" : [ { "id": "0946", "description" : "SONY - Camera", "manufacturer" : "SONY", } }Captura de pantalla de la consola que devuelve datos y un ejemplo de la población de entrada deseada:
1 Respuestas
Responde la pregunta0
Así que creo que podrías hacer algo como esto:
Suponiendo que su estructura html para la tabla se vea así:
<tr> <td><input class="asset-tag" id='asset_tag_no${count}' type='text' onchange="getAssetInfo(this)" bottom required /></td> <td><input class="serial-no" id='manufacturer_serial_no${count}' type='text' bottom required/></td> <td><textarea class="description" id='description${count}' type='text' bottom required description></textarea></td> </tr> Tenga en cuenta que he agregado atributos de class a cada entrada que usaremos más adelante. Además, actualicé onChange a getAssetInfo(this) que pasará el elemento de entrada real (en lugar de solo el valor).
Con esto puedes tener una función getAssetInfo como esta
const getAssetInfo = (inputElement) => { // get the asset tag id const id = $(inputElement).val(); // get the table row that this input is in const row = $(inputElement).closest("tr"); $.get(id, (data) => { // find the `.description` element and set it's value $(row).find("textarea.description").val(data.description); // find the `.serial-no` element and set it's value $(row).find("input.serial-no").val(data.manufacturer); // ... add more finders and setters based on whatever else you're getting back from the data. }); };Una vez que todo esté configurado, creo que encontrará que funciona. No agregué todos los elementos de entrada que muestra en su ejemplo, pero espero que pueda descubrir cómo extender esto a sus necesidades.