Loading JSON Data in Modal via Vanilla Javascript

Question

I am stuck on the next step of my project, and am going round in circles. In isolation (ie as static pages) I can work out how to get things working, but dealing with the Dynamic Data from the JSON API is really confusing me.

Here is where I'm at;

-I have a working page that links to a JSON API and all the relevant elements are populated (text fields & first image in array of images) which you can see in the CodePen link below. The Modal is currently accessed by clicking the Info Icon and contains static content.

I now want to move onto creating the following elements inside the Modal;

a) Create a lightbox gallery to be able to view the additional images in the array for each boat on the page.
b) Display additional information (included in the JSON feed) for each boat below a lightbox gallery.

But before I can do that, I need to understand...

Question

1. How best to access the JSON Array via the Modal?

My Thoughts
a) I already called the API data, surely I can still access the JSON data? Is it in memory, is it stored...
b) Should I have added a class/tag/id to the "Info Icon" when I call the loadTableData(boatData) function so that I can access/call each individual boat from the openModal() function ie openModal(boatId)
b) If I call the API data again I'm being inefficient!!!

CodePen Link

See the Pen Boat Data - Current Inventory by Michael Brewer ( @m1ck5k1 ) on CodePen .

Answer 1

Why don't you save the fetched data in a variable and manipulate it to populate model or try using ajax !!