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:

enter image description 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


    return App.bindEvents();

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

  createPerson: function () {
    var cryptosportInstance;

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

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

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


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

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

$(function () {
  $(window).load(function () {

My App.contracts object looks like the following:

enter image description here

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:

enter image description here

Any suggestions what I am doing wrong?

I appreciate your replies!

  • Not sure if this is related to your problem, but return cryptosportInstance.createPromoPerson(owner, name, price).call(); just by its name suggests that this function should make changes to state. In your case you are just .call'ing this function, which doesn't make any changes to state or make some action in your frontend. If my assumption is correct it should be set to sendTransaction instead. Feb 3, 2018 at 22:37

2 Answers 2


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) {
    var cryptosportInstance;

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


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);
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) => {

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';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.