Calling Javascript function after reading a JSON

Question

I’m doing a college paper, which is an e-commerce. And I have a question regarding the following question, I need to call a function only after loading some JSON files that I have in my project. I need to do this because I’m making a product carousel, and this carousel can only be built when I dynamically load all my products.

Below are the functions that need to be done before running the carousel:

• Generic function, to avoid calling too many functions.

  function loadProdutos() {
      findJogosPs4();
      findJogosXbox();
      findJogosNintendo();
  }
  

• This function below is similar to the other ones I’m calling in the products 'load':

  function findJogosPs4() {
      let produtosPs4 = new Array();
      $.getJSON('repository/produtosPs4.json', function (data) {
      data.jogosPs4.forEach(function (jogo) {
          newProduto = new Produto(
              jogo.id,
              jogo.nome,
              jogo.preco,
              jogo.caminhoCapa,
              jogo.qtdeParcelas,
              jogo.descontoAvista);
          produtosPs4.push(newProduto);
      });
      montaJogos(produtosPs4, '#gamePs');
      });
   }
  

  And this is the carousel I need to call after I get all the products:

  function carrossel() {
  $('.jogos').slick({
      dots: true,
      speed: 600,
      autoplaySpeed: 2500,
      autoplay: false,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [
          {
              breakpoint: 1024,
              settings: {
                  slidesToShow: 3,
                  slidesToScroll: 3,
                  dots: true
              }
          },
          {
              breakpoint: 760,
              settings: {
                  slidesToShow: 2,
                  slidesToScroll: 1,
                  dots: false
              }
          },
          {
              breakpoint: 480,
              settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  dots: false
              }
          }
      ]
  });
  }
  

Answer 1

You can use the method .done() from Jquery to do this, it will do something when you finish processing Json, so I saw in your code it would look like this.

function findJogosPs4() {
 let produtosPs4 = new Array();
 $.getJSON('repository/produtosPs4.json', function (data) {
 data.jogosPs4.forEach(function (jogo) {
    newProduto = new Produto(
        jogo.id,
        jogo.nome,
        jogo.preco,
        jogo.caminhoCapa,
        jogo.qtdeParcelas,
        jogo.descontoAvista);
    produtosPs4.push(newProduto);
 })
  montaJogos(produtosPs4, '#gamePs');
 }).done(function(){
    carrossel();
 });
}

Here you can see how the other methods work best. https://api.jquery.com/jquery.getjson/