JS 101 Beginner - DEX Code Giving Error $tokenBalanceTBody

Hi I’m following the DEX tutorial and am stuck now $tokenBalanceTBody function where the balance is pulled from the wallet. The table row () on line 26 is giving an Uncaught SyntaxError: Unexpected token ‘<’ error and I just cant figure out why the error is happening because I went back and copied the code exactly as the tutor typed it out.
Need some clarification to why the code wont work even when its exactly as what the tutor used in the tutorial. Thanks

// connect to Moralis server
    const serverUrl = "https://zrjb2pkmaisu.usemoralis.com:2053/server";
    const appId = "aaHqE4B8N0Uq5jaG0sC6JWIUmIr9t9jyaYRVRjdT";
    Moralis.start({ serverUrl, appId });

const $tokenBalanceTBody = document.querySelector('.js-token-balances');

// Converting from Wei using custom Function
const tokenValue = (value, decimals) =>
    (decimals ? value / Math.pow(10, decimals) : value);

// Metamask Wallet Login / Logout Functions
async function login() {
let user = Moralis.User.current();
if (!user) {
    user = await Moralis.authenticate();
}
console.log("logged in user:", user);
getStats();
}
 
async function getStats() {
    const balances = await Moralis.Web3API.account.getTokenBalances({chain: 'bsc'});
    console.log(balances);
    $tokenBalanceTBody.innerHTML = balances.map( (token, index) => {
**<tr>**
**    <td>${index + 1}</td>**
**    <td>${token.symbol}</td>**
**    <td>${tokenValue(token.balance, token.decimals)}</td>**
**</tr>**

**}**
**};**
async function logOut() {
await Moralis.User.logOut();
console.log("logged out");
}
    
document.querySelector("#btn-login").addEventListener('click', login);
document.getElementById("btn-logout").addEventListener('click', logOut);

// Get Top 20 Tokens
async function getTop20Tokens() {
    const response = await fetch('https://api.coinpaprika.com/v1/coins');
    const tokens = await response.json();

    return tokens
    .filter(token => token.rank >= 1 && token.rank <= 30)
    .map(token => token.symbol);
        
}

async function getTickerData(tickerList) {
    const response = await fetch('https://api.1inch.exchange/v3.0/137/tokens');
    const tokens = await response.json();
    const tokenList = Object.values(tokens.tokens);

    return tokenList.filter(token => tickerList.includes(token.symbol));    
}

getTop20Tokens()
    .then(getTickerData)
    .then(console.log);

OK I worked it out and fixed the error I should have used a backtick (`) instead of a apostrophe (’)

The code works and error is gone, I wish the tutor used the common names of the characters like backtick in stead of Template literals or explained what a Template literal was considering I am a total beginner hehe…

It would make life so much easier but I did learn what Template literals is so that is a good thing hehehe… as a beginner this is important but the tutors explanation could have been better considering the course is designed for beginner’s.

1 Like

Cool thanks I was wondering why it was initializing and your answer makes sense.