来自solidity合约的app.js文件中的getJSON（）出错

Question

I am making a simple dapp in truffle. When I use $.getJSON(), it throws an error.

My app.js:

App ={

web3Provider: null,
contracts: {},

init: function (){
    return App.initWeb3();
},

initWeb3: function (){
    if (typeof web3 != "undefined"){
        App.web3Provider = web3.currentProvider;
        web3 = new Web3(web3.currentProvider);
        App.setStatus("Metamask Detected!");

    }
    else {
        alert("Error. Try Again Later");
        //App.web3Provider = new Web3.provi/ders.HttpProvider('http://localhost:8545');
        web3 = new Web3(App.web3Provider);
        return null;
    }

        account = ethereum.request({ method: 'eth_accounts' });

        if (!account){
            //alert("Cannot Fetch Account. Make sure you are logged in!");
            App.setStatus("Please login to MetaMask");
            return ;
        }
        else {
            console.log('Account detected');
            console.log(account)
        }
        return App.initContract();

    },

initContract: function (){

    $.getJSON("FruitBasket.json", function (FruitBasketArtifact){
        
        App.contracts.FruitBasket = TruffleContract(FruitBasketArtifact);
        App.contracts.FruitBasket.setProvider(App.web3Provider);
        //return App.getContractProperties();
    });
},

This is not complete app.js code. Only the main part.

Solidity File: FruitBasket.sol (contract name: FruitBasket)

I have included every script in index.html. When I run this project using npm run dev , I get these in the terminal.

21.05.06 18:22:34 304 GET /index.html
21.05.06 18:22:34 304 GET /js/bootstrap.min.js
21.05.06 18:22:34 304 GET /js/web3.min.js
21.05.06 18:22:34 304 GET /js/truffle-contract.js
21.05.06 18:22:34 304 GET /js/app.js
21.05.06 18:22:34 404 GET /FruitBasket.json

I am getting 404 in FruitBasket.json

Also, in browser console, error displaying

GET http://localhost:3002/FruitBasket.json

I am totally new in this, so please tell me if I need to provide more information or any other code/file.

Answer 1

Try this:

 $.getJSON("./FruitBasket.json", function (FruitBasketArtifact){
   App.contracts.FruitBasket = TruffleContract(FruitBasketArtifact);
   App.contracts.FruitBasket.setProvider(App.web3Provider);
   //return App.getContractProperties();
});