deployed() returning undefined for truffle

I am trying to develop a dApp using truffle and ganache. deployed() is returning undefined so I cannot use that for creating an instance of the contract.

Here is the code:

App = {
  web3Provider: null,
  contracts: {},

  init: async function() {
        $('#category').append('<option value="Clothing">Clothing</option>');
        return await App.initWeb3();
  },

  initWeb3: async function() {
     if (window.ethereum) {
       App.web3Provider = window.ethereum;
       try {
         await window.ethereum.request({ method: "eth_requestAccounts" });
       } catch (error) {
         console.error("User denied account access");
       }
     }

     else if (window.web3) {
       App.web3Provider = window.web3.currentProvider;
     }
     else {
       App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545');
     }

     web3 = new Web3(App.web3Provider);
     return await App.initContract();
  },



  initContract: function() {
    $.getJSON('Marketplace.json', function(data) {
      // Get the necessary contract artifact file and instantiate it with @truffle/contract
      var MarketplaceArtifact = data;
      App.contracts.Marketplace = TruffleContract(MarketplaceArtifact);

      // Set the provider for our contract
      App.contracts.Marketplace.setProvider(App.web3Provider);
    });
     return App.initUI();

  },


  initUI: function() {
   var marketplaceInstance;
    App.contracts.Marketplace.deployed().then(function(instance) {
      marketplaceInstance = instance;
      return marketplaceInstance.getCategories.call();
    }).then(function(categories) {
         alert(categories[1]);
        for(i = 0; i < categories.length; i++) {
           $('#category').append('<option value="' + categories[i] + '">' + categories[i] + '</option>');
         }
    }).catch(function(err) {
         console.log(err.message);
    });

  }

};


$(function() {
  $(window).load(function() {
   App.init();
  });
});

I am getting an exception as follows in this line:

App.contracts.Marketplace.deployed().then(function(instance)

The exception is:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'deployed') at Object.initUI (register-nonprofit.js:49:31)

the deployed() function should return the contract instance, but it is not. Please help.