Web3js - Cannot read property deployed()

Question

My smart contract was parsed via truffle compile to the following json file:

{
  "contractName": "CryptoSportsToken",
  "abi": [
    {
      "constant": true,
      "inputs": [],
      "name": "promoCreatedCount",
...

The file can be found here:

I am running the following web3 code for my frontend:

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

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

  initWeb3: function () {

    // Is there an injected web3 instance?
    if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider;
    } else {
      // If no injected web3 instance is detected, fall back to Ganache
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
    }
    web3 = new Web3(App.web3Provider);

    return App.initContract();
  },

  initContract: function () {

    $.getJSON('CryptoSportsToken.json', function (data) {
      // Get the necessary contract artifact file and instantiate it with truffle-contract
      var CryptoSportsTokenArtifact = data;
      App.contracts.CryptoSportsToken = TruffleContract(CryptoSportsTokenArtifact);

      // Set the provider for our contract
      App.contracts.CryptoSportsToken.setProvider(App.web3Provider);

    });

    return App.bindEvents();
  },

  bindEvents: function () {
    $(document).on('click', '.btn-create', App.createPerson());
  },

  createPerson: function () {
    var cryptosportInstance;


    console.log("App: \n");
    console.log(App);
    console.log("App.contracts: \n");
    console.log(App.contracts);

    console.log("###################")
    console.log(App.contracts.CryptoSportsToken)//returns undefined

    App.contracts.CryptoSportsToken.deployed().then(function (instance) {
      cryptosportInstance = instance;

      console.log(cryptosportInstance)

      var owner = $('#owner').val();
      var name = $('#name').val();
      var price = $('#price').val();

      return cryptosportInstance.createPromoPerson(owner, name, price).call();
    }).catch(function (err) {
      console.log(err.message);
    })
  },
};

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

My App.contracts object looks like the following:

It seems to me that it is still undefined. If I console log console.log(App.contracts.CryptoSportsToken) I get undefined back.

I tried to redeploy the contract, which was done successfully:

Any suggestions what I am doing wrong?

I appreciate your replies!

Answer 1

As far as I know, when you are binding events, it should look like:

bindEvents: function () {
    $(document).on('click', '.btn-create', App.createPerson);
  },

  createPerson: function (event) {
    event.preventDefault();
    var cryptosportInstance;
    ...

I just think that there is something incorrect in the order your functions being triggered.

Answer 2

Idk what your exact issue is because our js files are different. but here is code from my application.

const contract = require('truffle-contract');
const samyTokenContract = contract(SamyTokenContract);
samyTokenContract.setProvider(this.state.web3.currentProvider);
this.setState({ samyTokenContract: samyTokenContract})

Then I use:

var samyTokenInstance;
this.state.samyTokenContract.at(samyContractAddress).then((instance) => {
    samyTokenInstance = instance;
    return samyTokenInstance.balanceOf.call(this.state.vidulum);
}).then((result) => {
    return this.setState({ smyValue: web3.fromWei(result.toNumber(), 'ether') })
}).catch((error) => {
    alert(error)
})

To get the token balance for a specific address (vidulum)

Oh and I import the contract like so:

import SamyTokenContract from '../../../build/contracts/SamyToken.json';