Access value of a variable outside a function

Question

I know this question has been asking many times, but I still can't find any solution ! Here is my code : I'm programming an array of cryptocurrency's values but I'm stuck when I'm trying to create graphs.

ajaxGet("https://api.coinmarketcap.com/v1/ticker/?limit=300", function (reponse) {
    // Transforme la réponse en tableau d'objets JavaScript
    var monnaie = JSON.parse(reponse);
    $("#tableBody").empty();      

    var tr;


    function page1(event) { 

        var timestamp = Math.round(new Date().getTime() / 1000);
        console.log(timestamp);

        for (var i = 0; i < 50; i++) {


            ajaxGet("https://min-api.cryptocompare.com/data/histohour?fsym=" + monnaie[i].symbol + "&tsym=USD&limit=28&aggregate=6&toTs=" + timestamp, function (reponse2) {

                var monnaieGraph = JSON.parse(reponse2)['Data'];
                var points = '';
                var maximum = Math.max.apply(Math,monnaieGraph.map(function(o){return o.high;}))
                var minimum = Math.min.apply(Math,monnaieGraph.map(function(o){return o.low;}))


                for (var j=0; j<=28; j++){
                    var moyenne = ((monnaieGraph[j].high)+(monnaieGraph[j].low))/2;
                    echelle = ((-100/(maximum-minimum))*(moyenne-minimum))+100;

                    points += (j*12) + ',' + echelle + '
';
                }
            });


            tr = $('');
            tr.append("" + monnaie[i].rank + "");
            tr.append("" + "" + "" + monnaie[i].name + "" + "" + monnaie[i].symbol + "");
            tr.append("" + formatter.format(monnaie[i].price_btc) + " BTC" + "");
            tr.append("" + "$ " + formatter.format(monnaie[i].price_usd) + "");
            tr.append("" + "$ " + formatter.format(monnaie[i].market_cap_usd) + "");
            tr.append("" + formatter.format(monnaie[i].available_supply) + " " + monnaie[i].symbol + "");
            if (Number(monnaie[i].percent_change_24h) > 0) {
                tr.append("" + Number(monnaie[i].percent_change_24h) + "%" + "");
                //tr.append("" + "");
            }
            else {
                tr.append("" + Number(monnaie[i].percent_change_24h) + "%" + "");
            }
            tr.append('');
            $('#tableBody').append(tr);

        }
    }

jvdh · Accepted Answer

I think the first of the three code snippets should work, if you change the following things:

The scope of your points variable is limited to the callback function you provide to the ajaxGet function. Therefore when you try to use it when building your table, it can't be accessed. That is why you get the error points is not defined. Declare the points variable in scope of your for-loop to solve this.

~~When building your points you delimit your point pairs by , I'm not sure if that works in your SVG code in this case. Maybe try to delimit by a blank space.~~

The problem with the SVG images not showing is because apparently you have to reload the actual HTML that you generated to get the SVG images rendered in the browser. See this related anwer. In your case you should reload the HTML of your table every time after a row is added. Using jQuery it would look something like this:

// Row creation logic...

$('#tableBody').append(tr);
$("#tableBody").html($("#tableBody").html());

Edit:

Solved scoping and async issues by using closures.
Used separate functions for somewhat improved readability.
Used jQuery to build the table and SVG elements.

function getTimestamp() {
    return Math.round(new Date().getTime() / 1000);
}

function getAveragePrice(pricepoint) {
    return (pricepoint.high + pricepoint.low) / 2;
}

function getPointMap(min, max) {
    return function (price, index) {
        var range = max - min;
        var offset = price - min;
        var value = 100 - (offset * 100 / range);

        return `${index * 12},${value}`;
    }
}

function getPoints(prices) {
    var min = Math.min(...prices);
    var max = Math.max(...prices);
    
    var points = prices.map(getPointMap(min, max));

    return points.join(" ");
}

function getSvg(points) {
    var line = $('');
    line.attr("fill", "none");
    line.attr("stroke", "#0074d9");
    line.attr("stroke-width", 6);
    line.attr("points", points);

    var svg = $('');
    svg.attr("viewBox", "0 0 336 100");
    svg.attr("width", 116);
    svg.attr("height", 35);
    svg.append(line);

    return svg;
}

function getCell(content) {
    return $("").append(content);
}

function getRow(coin, points) {
    // Set id to SortOrder provided by API so 
    // we can use it to add the rows to the 
    // table in the right order.
    var tr = $('');
    tr.attr("id", coin.SortOrder);

    tr.append(getCell(coin.SortOrder));
    tr.append(getCell(coin.CoinName));
    tr.append(getCell(`${coin.TotalCoinSupply}`));
    
    tr.append(getCell(getSvg(points)));

    return tr;
}

function addRow(row, table)
{
    var current = table.children().first();

    // While there is a next row
    while(current.is("tr")) {
        // Check if the rank of current row is 
        // larger than the rank of the row we 
        // want to add.
        if(Number(current.attr("id")) > Number(row.attr("id"))) {
            // If true, add the row before the 
            // current row and we are done.
            current.before(row);
            return;
        }

        // Else check the next row.
        current = current.next();
    }

    // If the table does not contain rows yet or 
    // the end of the table is reached without 
    // finding larger ranks, just add the row at 
    // the end.
    table.append(row);
}

function getHistoryCallback(table, coin) {
    return function (history) {
        var prices = history.Data.map(getAveragePrice);
        var points = getPoints(prices);
        var row = getRow(coin, points);
        
        addRow(row, table);
        table.html(table.html());
    }
}

function sortCoins(a, b) {
    return a.SortOrder - b.SortOrder;
}

function getCoinsCallback(table) {
    return function (coinlist) {
        var coins = Object.values(coinlist.Data).sort(sortCoins);
        
        table.empty();

        for (var i = 0; i < 10; i++) {
            var coin = coins[i];

            var url = "https://min-api.cryptocompare.com/data/histohour";
            var data = {
                fsym: coin.Symbol,
                tsym: "USD",
                limit: 28,
                aggregate: 6,
                toTs: getTimestamp()
            };
            var callback = getHistoryCallback(table, coin);

            $.getJSON(url, data, callback);
        }
    }
}

function populateTable(table_id) {
    var table = $(`#${table_id}`);
    
    var url = "https://min-api.cryptocompare.com/data/all/coinlist";
    var callback = getCoinsCallback(table);

    $.getJSON(url, callback);
}

$(document).ready(function () {
    populateTable("tableBody");
});

Access value of a variable outside a function

Answers (1)

Edit:

Related Questions