API calls in javascript

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.

I mean all the other answers are probably fine, but do you dare to venture another route and use $.getJSON(...)? ;) — Spencer D
– Spencer D, Commented Feb 14, 2017 at 7:12
Esteann Afonso check the answers below and if worked then mark that answer as accepted.Thanks — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Feb 14, 2017 at 9:15
make sure to tag questions as jQuery, if you're looking for a jQuery solution. — Josh from Qaribou
– Josh from Qaribou, Commented Feb 15, 2017 at 3:12

Death-is-the-real-truth · Accepted Answer · 2017-02-15 02:53:44Z

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;
}));

edited Feb 15, 2017 at 2:53

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

answered Feb 14, 2017 at 6:50

bejado

1,45812 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sameer · Accepted Answer · 2017-02-14 06:56:59Z

0

You need to pares your json data and also wait for the get request to complete. Get being asynchronous.

 <script type="text/javascript">
$.get( '../v1/getapicall/default', function( data ) { 
    var obj = JSON.parse(data);      
    document.getElementById("txt1label").innerHTML = obj.Total;
});
</script>

edited Feb 14, 2017 at 6:56

answered Feb 14, 2017 at 6:51

Sameer

71510 silver badges26 bronze badges

1 Comment

bejado Over a year ago

This is incorrect. $.get returns a promise, not the actual data.

Collectives™ on Stack Overflow

API calls in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related