0
166
ViewsHow to fetch data from json file and display in html?
I have a JSON database with information that I would like to autofill in my JavaScript/HTML if a particular element in the array is found. I have an handler event, onchange to listen if that particular element is found, it prints all of the info of that particular array. I have it printing into the console, but how would I go about printing this onto my relevant HTML sections?
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 in the database
{
"assets" : [
{
"id": "0946",
"description" : "SONY - Camera",
"manufacturer" : "SONY",
}
}
Screenshot of console returning data and an example of the desired input population:
1 answers
Answer question0
So I think you could do something like this:
Assuming you're html structure for the table looks like this:
<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>
Notice, I've added class attributes to each input which we'll use later. Also, I updated the onChange to getAssetInfo(this) which will pass the actual input element itself (instead of just the value).
With this you can have a getAssetInfo function like this
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.
});
};
Once this is all set up, I think you'll find that it works. I didn't add all the input elements that you show in your example but hopefully you can figure out how to extend this to your needs.