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?