This is my Html code :

<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Election Results</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <div class="container" style="width: 650px;">
      <div class="row">
        <div class="col-lg-12">
          <h1 class="text-center">Election Results</h1>
          <div id="loader">
            <p class="text-center">Loading...</p>
          <div id="content" style="display: none;">
            <table class="table">
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">Votes</th>
              <tbody id="candidatesResults">
            <form onSubmit="App.castVote(); return false;">
              <div class="form-group">
                <label for="candidatesSelect">Select Candidate</label>
                <select class="form-control" id="candidatesSelect">
              <button type="submit" class="btn btn-primary">Vote</button>
              <hr />
            <p id="accountAddress" class="text-center"></p>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.js"></script>
    <script src="js/app.js"></script>

I'm trying to connect my local blockchain on ganache to the app. I went to Metamask on chrome>Custom rpc enter image description here

But I'm not getting a desired result. It is not showing me the list of candidates. Can someone help? This is my Election.sol file

pragma solidity ^0.5.0;

contract Election {
    struct Candidate {
        uint id;
        string name;
        uint votecount;
mapping (uint => Candidate) public candidates;
uint public candidateCount;

  constructor() public {
   addCandidate("Candidate 1");
   addCandidate("Candidate 2");
  function addCandidate (string memory _name)  private {



This is my app.js file:

  App = {
      web3Provider: null,
      contracts: {},
      account: '0x0',
      hasVoted: false,
    //initialise app using web3. It connects client side application to block chain
      init: function() {
        return App.initWeb3();
      initWeb3: function() {
        if (typeof web3 !== 'undefined') {
          // If a web3 instance is already provided by Meta Mask.
          //Meta mask can change cgrome browser to metamask browser
          App.web3Provider = web3.currentProvider;
          //setting the web3 provider to our  own web3 provider
          web3 = new Web3(web3.currentProvider);
        } else {
          // Specify default instance if no web3 instance provided
          App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
          web3 = new Web3(App.web3Provider);
        return App.initContract();
    //initialise contract
    //contract to front end application
      initContract: function() {
        $.getJSON("Election.json", function(election)
        //load a new json file  of Election artifacts
          // Instantiate a new truffle contract from the artifact
          //only the truffle contracts contacts inside the app
          App.contracts.Election = TruffleContract(election);
          // Connect provider to interact with contract
          //make app work
          return App.render();
      // Listen for events emitted from the contract
      listenForEvents: function() {
        App.contracts.Election.deployed().then(function(instance) {
          // Restart Chrome if you are unable to receive this event
          // This is a known issue with Metamask
          // https://github.com/MetaMask/metamask-extension/issues/2393
          instance.votedEvent({}, {
            fromBlock: 0,
            toBlock: 'latest'
          }).watch(function(error, event) {
            console.log("event triggered", event)
            // Reload when a new vote is recorded
      render: function() {
        //this display accounts of all acounts on blockchain
        //displays the candidates contesting
        var electionInstance;
        var loader = $("#loader");
        var content = $("#content");
        // Load account data
        //getCoinbase gives the account that we are currently on in the blockchain 
        web3.eth.getCoinbase(function(err, account) {
          if (err === null) {
            App.account = account;
            //display the account
            $("#accountAddress").html("Your Account: " + account);
        //get copy of deplyed contract
        App.contracts.Election.deployed().then(function(instance) {
          electionInstance = instance;
          return electionInstance.candidatesCount();
        }).then(function(candidatesCount) {
          var candidatesResults = $("#candidatesResults");
          var candidatesSelect = $('#candidatesSelect');
          for (var i = 1; i <= candidatesCount; i++) {
            electionInstance.candidates(i).then(function(candidate) {
              var id = candidate[0];
              var name = candidate[1];
              var voteCount = candidate[2];
              // Render candidate Result
              var candidateTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + voteCount + "</td></tr>"
              // Render candidate ballot option
              var candidateOption = "<option value='" + id + "' >" + name + "</ option>"
          return electionInstance.voters(App.account);
        }).then(function(hasVoted) {
          // Do not allow a user to vote
          if(hasVoted) {
        }).catch(function(error) {
      castVote: function() {
        var candidateId = $('#candidatesSelect').val();
        App.contracts.Election.deployed().then(function(instance) {
          return instance.vote(candidateId, { from: App.account });
        }).then(function(result) {
          // Wait for votes to update
        }).catch(function(err) {
    $(function() {
      $(window).load(function() {
        //app initialises whenever 

This is what I'm getting: What i'm getting

This is what i should get: enter image description here

  • Can you add your app.js file ? – clement Dec 26 '20 at 21:54
  • @clement added the app.js file. Can you please explain the error in my code? – Vasvi Sood Dec 27 '20 at 5:19

Just refresh the page once. Metamask does not respond instantaneously. Also there were some variable name errors in the code (like using candidatesCount instead of Candidate), that I corrected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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