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

Question

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:

Can you show what you expect the output html to be given the database you've shown as an example? I'm having trouble putting together what the javascript you have is doing - or what is working or not working exactly. At a glance, the onReady function looks very weird since it just contains html which isn't valid javascript. So... can you explain what you see as not working and maybe what you expect to see when things are working? — mr rogers
– mr rogers, Commented Mar 30, 2022 at 18:02
@mrrogers I included an image :) what I would like to happen is, as the user types in an asset tag that is in the system, it should autocomplete the rest of the available fields — Hope Dunner
– Hope Dunner, Commented Mar 30, 2022 at 18:09
So is it true that the last loop that you have in the javascript ( "// Iterate over all rows and store data"...) is not relevant here? That is... you really just want to fill in the inputs after your $.get returns some data, right? — mr rogers
– mr rogers, Commented Mar 30, 2022 at 18:15
yes sir, thats not relevant. I just wanted to show what data consisted of, I can delete it! @mrrogers — Hope Dunner
– Hope Dunner, Commented Mar 30, 2022 at 18:16
For the html id's like asset_tag_no${count}, I assume that the first one is asset_tag_no0 and then asset_tag_no1 corresponding to the table row count? Is it possible to use the asset id there instead? If not, there's a little more work to figure out which row is the right one to update. I'm not sure how much control you have over the html in this problem. — mr rogers
– mr rogers, Commented Mar 30, 2022 at 18:23

mr rogers · Accepted Answer · 2022-03-30 19:00:52Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related