1

I have two files, one is fetching data from the backend and the other is adding functions and working things to the data that came back. Earlier, I was doing this using localStorage and localStorage is fast and can access the elements outside of any file, but because both of the files will load at the same time, and the data from the backend will take some time, the file two functions and everything are not working, I am using defer in both of the script tags. What I think of the solution is how to load the file 2 after the file 1 data has been loaded, but I am not aware of the syntax and all to do that. Any help will be greatly appreciated :)

//File 1

function callProductDetails() {
  const sendLocalId = JSON.parse(localStorage.getItem('mytest') ?? "[]");
  fetch("/apps/selliy/localProduct", {
    method: "POST",
    headers: {'Content-Type': 'application/json'}, 
    body: JSON.stringify(sendLocalId)
  }).then(function (response) {
    // The API call was successful!
    
    return response.json();
  }).then(function (data) {        
          console.log(data);
          product_carousel_wrapper.innerHTML = data.map(productData => 
            `<h1 class="hye">${productData.title}</h1>`
          ).join('');
          
          
  });
}

```js

//File 2
const hye = document.querySelector('.hye');

hye....... // Do something with hye
Leith
  • 135
  • 10
  • Create new function in file 2 and wrap your code inside it. Call that function from file 1 after your fetch is completed (inside `.then()` I guess). – Karan Apr 28 '22 at 11:53
  • @Karan Can you please show an example if you don't mind – Leith Apr 28 '22 at 11:57
  • Is there a specific reason you're using two files? If not, then you can do it all in the same file. – Mubaraq Wahab Apr 28 '22 at 12:02
  • @MubaraqWahab, The is not only limited to just a `h1` and the file2 is of about 500 lines – Leith Apr 28 '22 at 12:08

1 Answers1

3

Create new function in file 2 (for ex processData()) and wrap your code inside it. Call that function from file 1 after your fetch is completed (inside second .then() or at appropriate place as per your requirement)

File 2

function processData() {

    const hye = document.querySelector('.hye');
    
    hye....... // Do something with hye

}

File 1

function callProductDetails() {
  const sendLocalId = JSON.parse(localStorage.getItem('mytest') ?? "[]");
  fetch("/apps/selliy/localProduct", {
    method: "POST",
    headers: {'Content-Type': 'application/json'}, 
    body: JSON.stringify(sendLocalId)
  }).then(function (response) {
    // The API call was successful!
    
    return response.json();
  }).then(function (data) {        
          console.log(data);
          product_carousel_wrapper.innerHTML = data.map(productData => 
            `<h1 class="hye">${productData.title}</h1>`
          ).join('');
          
          // Call function from file 2 from here
          processData();
  });
}
Karan
  • 12,059
  • 3
  • 24
  • 40
  • Do we not have to import file 2 in file 1 first? or we just have to directly call the function? – Leith Apr 28 '22 at 12:20
  • No, we do not need to import. You can find more details here https://stackoverflow.com/questions/3809862/can-we-call-the-function-written-in-one-javascript-in-another-js-file, https://stackoverflow.com/questions/25962958/calling-a-javascript-function-in-another-js-file – Karan Apr 28 '22 at 12:24
  • Thank you so much, it helps, just one more thing, previously I was having a long file 2 and in there there were many things goes around, as now I have made everything inside a function, there was an event `document.addEventListener("DOMContentLoaded"` is not working, rest all of the things are working. Is there any specific reason? – Leith Apr 28 '22 at 12:46
  • You may define events or if there are functions then you should be defining them outside of that function. You can refer this https://javascript.info/function-basics, https://javascript.info/ – Karan Apr 28 '22 at 12:51