用javascript调用API

Question

I have a API php functions that executes a SQL query from the database and encodes the values in JSON.

eg

function getApiCall(){
     $sql = 'SELECT * AS "Total" from tablename"';
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql);
        $stmt->execute();
        $user = $stmt->fetch(PDO::FETCH_OBJ);
        $db = null;
        echo json_encode($user);
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

The value on calling the URL http://localhost/getapicall/apikey in the browser is

{"Total":"80"}

In my front end HTML page using JavaScript, the API URL is called

<script type="text/javascript">
var myJSON = $.get('../v1/getapicall/default');
document.getElementById("txt1label").innerHTML = myJSON;
</script>

But the value displayed is [object object] , how do I display the value of the json data i.e 80 in this case?

If I try putting

document.getElementById("txt1label").innerHTML = myJSON.Total;

The value gets displayed as undefined.

Answer 1

$.get() is an asynchronous function, which means it won't return your data right away- it has to make a round trip to your server first.

Instead you pass it a function to be executed when the data is returned from your endpoint.

var myJSON = $.get('../v1/getapicall/default', function(result) {
    document.getElementById("txt1label").innerHTML = result.Total;
}));