How to handle json respond from api endpoint (Uncaught TypeError: )

charlion · February 15

My problem is how to handle this json respond using document.getElementById or any other methods. I needed to output the value of 'P'. And also work with php echo on the output
The json respond is bellow

[
  {
    "a": 26129,        
    "p": "0.01633102",  
    "q": "4.70443515",  
    "f": 27781,         
    "l": 27781,     
    "T": 1498793709153,  
  "m": true,          
    "M": true           
  }
]

Bellow is the code I'm working with. it gives Uncaught TypeError: Cannot read property 'p' of undefined

<!DOCTYPE html>
<html>
<body>

<h2> Price</h2>

<p id="demo"></p>

<script>
 var burl = "https://api3.binance.com"; /////////// baseurl/////////
    
    var query = '/api/v3/aggTrades'; 
    
    query += '?symbol=BTCUSDT';
    
    var url = burl + query;
    
    var ourRequest = new XMLHttpRequest();
    
    ourRequest.open('GET',url,true);
    ourRequest.onload = function(){
        console.log(ourRequest.responseText);
    }
    var obj = ourRequest.send();	
	document.getElementById("demo").innerHTML = obj.p;
	
</script>
</body>
</html>

Please help me and thanks in advance

Barand · February 15

You have an array containing an object.

Array
(
    [0] => stdClass Object
        (
            [a] => 26129
            [p] => 0.01633102
            [q] => 4.70443515
            [f] => 27781
            [l] => 27781
            [T] => 1498793709153
            [m] => 1
            [M] => 1
        )

)

Try innerHTML = obj[0].p

Edited February 15 by Barand

requinix · February 15

The send method does not return a value.

Forget XMLHttpRequest and learn about the magic that is fetch.

charlion · February 15

@Barand Thanks for your respond. i used

 document.getElementById("demo"). innerHTML = obj[0].p

still Uncaught TypeError: Cannot read property '0' of undefined.

more Light into it would be appreciated

Strider64 · February 15

1 hour ago, charlion said:
@Barand Thanks for your respond. i used
 document.getElementById("demo"). innerHTML = obj[0].p
still Uncaught TypeError: Cannot read property '0' of undefined.

more Light into it would be appreciated

If you are not using Fetch then you need to parse the data:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Edited February 15 by Strider64

Barand · February 15

try

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type='text/javascript'>
$().ready( function() {
    var burl = "https://api3.binance.com"; /////////// baseurl/////////
    var query = burl + '/api/v3/aggTrades';
    
    $.get(
        query,
        {"symbol":"BTCUSDT"} ,
        function(resp) {
            $("#demo").html("a - " +   resp[0].a + "<br>")
            $("#demo").append("p - " + resp[0].p + "<br>")
            $("#demo").append("q - " + resp[0].q + "<br>")
            var d = new Date()
            d.setTime(resp[0].T)
            $("#demo").append("T - " + d.toString())
        },
        "JSON"
    )
})    
</script>
</head>
<body>
    <div id='demo'>
        <!--output goes here-->
    </div>
</body>
</html>

outputs...

a - 577817177
p - 48585.69000000
q - 0.10000000
T - Mon Feb 15 2021 17:50:19 GMT+0000 (GMT Standard Time)

charlion · February 15

2 hours ago, Barand said:

try


<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type='text/javascript'>
$().ready( function() {
    var burl = "https://api3.binance.com"; /////////// baseurl/////////
    var query = burl + '/api/v3/aggTrades';
    
    $.get(
        query,
        {"symbol":"BTCUSDT"} ,
        function(resp) {
            $("#demo").html("a - " +   resp[0].a + "<br>")
            $("#demo").append("p - " + resp[0].p + "<br>")
            $("#demo").append("q - " + resp[0].q + "<br>")
            var d = new Date()
            d.setTime(resp[0].T)
            $("#demo").append("T - " + d.toString())
        },
        "JSON"
    )
})    
</script>
</head>
<body>
    <div id='demo'>
        <!--output goes here-->
    </div>
</body>
</html>

outputs...


a - 577817177
p - 48585.69000000
q - 0.10000000
T - Mon Feb 15 2021 17:50:19 GMT+0000 (GMT Standard Time)

Thanks

Sign In

How to handle json respond from api endpoint (Uncaught TypeError: )

Recommended Posts

charlion 0

Link to post

Share on other sites

Barand 1,650

Link to post

Share on other sites

requinix 983

Link to post

Share on other sites

charlion 0

Link to post

Share on other sites

Strider64 19

Link to post

Share on other sites

Barand 1,650

Link to post

Share on other sites

charlion 0

Link to post

Share on other sites

Join the conversation

Browse

Activity

Important Information