How to fetch data from json file and display in html?-CodePudding

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:

CodePudding user response：

So I think you could do something like this:

Assuming you're html structure for the table looks like this:

<tr>
  <td><input  id='asset_tag_no${count}' type='text' onchange="getAssetInfo(this)" 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>
</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.