Problem when using truffle-contract.js to load contract

GregorS · February 2018

Hey,

I am having an extremely easy contract called `Friend.sol`:

    pragma solidity ^0.4.17;
    
    contract Friend {
    
        string name;
        uint age;
    
        function setFriend(string _name, uint _age) public {
            name = _name;
            age = _age;
        }
    
        function getFriend() public constant returns (string, uint) {
            return(name, age);
        }
    }

I deployed my contract on ganache-cli:

 Running migration: 1_initial_migration.js
      Deploying Migrations...
      ... 0xa4d581c585527651c4a74a0d85ef2e21ac91a43e17f290f5f548d6e5f0686e22
      Migrations: 0xf741d74fb4d4eab8c044dc4b1c0dfb7a244a6922
    Saving successful migration to network...
      ... 0xca51a8f5124ef4f1dc8dfba5b9a9c1388cda003686309ff152b776600a64cf81
    Saving artifacts...
    Running migration: 2_deploy_contracts.js
      Deploying Friend...
      ... 0x9195ced6c131afaf1e735fc90464f9b94dd4215e909f463f06e51565b5e7e804
      Friend: 0x8a260eec4c77f82bd885b730f782f9bbe680dd64
    Saving successful migration to network...
      ... 0x008b78bf25c5aa93fb6b8f16367d006e68751a54550da32bcce382067ad1250d
    Saving artifacts...

Within my frontend I am trying to access the contract via web3 and truffle-contract:


<html>
    
    <head>Truffle-Contract Test</head>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    
    <body>
    
        <h1>I am Friend with...</h1>
    
        <h2 id="friend"></h2>
    
        <label for="name" class="col-lg-2 control-label">Name:</label>
        <input type="text" id="name">
    
        <label for="age" class="col-lg-2 control-label">Age:</label>
        <input type="text" id="age">
    
        <button id="button">Update Friend</button>
    
    </body>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="./js/web3.min.js"></script>
    <script type="text/javascript" src="./js/truffle-contract.js"></script>
    <script type="text/javascript">
        // Is there an injected web3 instance?
        if (typeof web3 !== 'undefined') {
            var web3Provider = web3.currentProvider;
        } else {
            // If no injected web3 instance is detected, fall back to Ganache
            var web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
        }
        web3 = new Web3(web3Provider);
    
        // Get Contract
        $.getJSON('./Friend.json', function (data) {
            // Get the necessary contract artifact file and instantiate it with truffle-contract
            var FriendArtifact = data;
            var FriendContract = TruffleContract(FriendArtifact);
    
            // Set the provider for our contract
            FriendContract.setProvider(web3Provider);
    
            console.log("FriendContract:")
            console.log(FriendContract)
    
            // interact with the smart contract
            FriendContract.getFriend(function (error, result) {
                if (!error) {
                    $("#friend").html(result[0] + ' (' + result[1] + 'years old)')
                } else {
                    console.log(error)
                }
            })
    
            $("button").click(function () {
                FriendContract.setFriend($("name").val(), $("age").val())
            })
        });
    </script>
    
    </html>

However, when running my lite-server I get:

The error is, when I want to interact with my contract on the following line:

FriendContract.getFriend(function (error, result) {

I also created a small github repo to show my entire code.

Any suggestions what I am doing wrong?

Howdy, Stranger!

Quick Links

Categories

Problem when using truffle-contract.js to load contract