Javascript function not executing if statement

Question

I have a JavaScript code designed to get JSON Data from a website and write texts on an image whenever the data collected matches the data in an if statement. However it is not working and I am unsure of the cause. I have tried executing the context.drawText without the if statements and it works, but the moment I put it inside an if statement, the code would not draw. Please help.

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<canvas id="myCanvas" width="900" height="800"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    imageObj.onload = function()
    {
        DrawScreen();
        DrawText();

    };

    $.get(
        "https://dweet.io/get/latest/dweet/for/james",
        function(data)
        {
            result = data['with'][0]['thing'];
            //show what is inside result
            //document.write(result);
        }
    );
    imageObj.src = 'https://s31.postimg.org/v85n3kvez/dummyfp.jpg';

    function DrawScreen()
    {
        context.drawImage(imageObj, 10, 10);
        document.write(result);
    }

    function DrawText()
    {
        context.fillStyle = "green";
        context.font = "18px sans-serif";
        context.textBaseline = 'top';
        if (result == '' || result == null)
        {
            context.fillText('noooo', 430, 100);
        }
        if (result == 'james')
        {
            context.fillText('james', 430, 100);
        }
        else
        {
            context.fillText('thisisnt', 430, 100);
        }
    }
</script>

JSFiddle

Answer 1

Hi u have to move your DrawText inside the $.get function once u got the result only u can check the value because the Drawtext you are calling before the Get function so the result value is undefined ,

please check this code

JS

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<canvas id="myCanvas" width="900" height="800"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    var result;
    imageObj.onload = function()
    {
    DrawScreen();


    };

    $.get(
        "https://dweet.io/get/latest/dweet/for/james",
        function(data)
        {
            result = data['with'][0]['thing'];
            DrawText();
        }
    );
    imageObj.src = 'https://s31.postimg.org/v85n3kvez/dummyfp.jpg';

    function DrawScreen()
    {
        context.drawImage(imageObj, 10, 10);
    }

    function DrawText()
    {
        context.fillStyle = "green";
        context.font = "18px sans-serif";
        context.textBaseline = 'top';
        alert(result)
        if (result == '' || result == null)
        {
            context.fillText('noooo', 430, 100);
        }
        if (result == 'james')
        {
            context.fillText('james', 430, 100);
        }
        else
        {
            context.fillText('thisisnt', 430, 100);
        }
    }
</script>

for reference http://plnkr.co/edit/CpaawlQl9juho1BUO6b3?p=preview

Answer 2

I updated the $.get call to have an onComplete event: JSFIDDLE

$.get({
    url: "https://dweet.io/get/latest/dweet/for/james",
    success: function(data)
    {
        result = data['with'][0]['thing'];
        //show what is inside result
        //document.write(result);
    },
    complete: function(){
        DrawText();
    }
});

Answer 3

将$ .get放入imageObj.onload中，并将DrawScreen / DrawText放入$ .get回调函数中。