Incorrect bytes32 to string conversion

Question

My solidity function is returning a bytes32[] which I am looping in Javascript and converting to string using web3.toAscii(). Printing this in console shows extra � characters at the end as shown below

The function returning bytes32

function myBets() public view returns (uint[] memory, bytes32[] memory, bytes32[] memory, int[] memory){
    uint n = betterCacheData[msg.sender].length;

    uint[] memory betValues = new uint[](n);
    bytes32[] memory options = new bytes32[](n);
    bytes32[] memory winStatus = new bytes32[](n);
    int[] memory moneyLineValues = new int[](n);

    for(uint i=0; i<n; i++){
        uint betId = betterCacheData[msg.sender][i].betId;
        uint optionId = betterCacheData[msg.sender][i].optionId;

        betValues[i] = betterCacheData[msg.sender][i].betValue;
        options[i] = bets[betId].moneyLineData[optionId].option;

        if(bets[betId].betStatus == BetStatus.Open || bets[betId].betStatus == BetStatus.Closed){
            winStatus[i] = "pending";
        } else{
            if(bets[betId].correctChoice == optionId){
                winStatus[i] = "won";
                moneyLineValues[i] = bets[betId].moneyLineData[optionId].value;
            } else{
                winStatus[i] = "lost";
            }
        }
    }
    return (betValues, options, winStatus, moneyLineValues);
}

Any help would be greatly appreciated! Thank you!

Answer 1

I used the byte32 values to convert to string using a hex to string converter website. The website also displays these weird characters.

Then I tried stripping all characters before and including x, and also all the 0's and now I got the desired output

Then I tried passing 776fe to web3.toAscii() and got the desired output.

TLDR Use web3.toUtf8() instead