Currently, I am working on developing a simple dapp in Truffle. However, I encountered an error when using $.getJSON() function in my app.js file.
Below is a snippet of 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.providers.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();
});
},
The above code represents the main part of the app.js file and not its entirety.
Solidity File: FruitBasket.sol (contract name: FruitBasket)
All scripts have been included in index.html file. Upon running the project using npm run dev, I encounter the following logs 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
The issue arises with a 404 error for FruitBasket.json file.
In addition, the browser console displays an error as shown below:
GET http://localhost:3002/FruitBasket.json
I am relatively new to this, so feel free to ask if more information or other code/files are needed.