Javascript inside HTML and display JSON response

Question

I'm playing around with the Ecobee API and trying to write a web page where people will go to get a PIN for my app. I have to be missing something bc nothing happens when I run the below code in CodeRunner. Can someone point out what I'm doing wrong? Obviously I'm going to want it to format this and make it look nice, but first I need to be able to retrieve the data. Thank you so much.

Mike

<HTML>
<head>
    <title>Ecobee API PIN TEST</title>
</head>
<body onload="PINCode();">
    <script type="text/javascript">
        function PINCode() {
            
            apiKey = 'API_KEY'
            
            // set all apiKey inputs to have apiKey value entered
            $(".apiKey").each(function() {
                $(this).val(apiKey);
            });
            
            var url = 'https://api.ecobee.com/authorize?response_type=ecobeePin&client_id=' + apiKey + '&scope=smartWrite';
            
            $.getJSON(url,  function(data) {
                // set authCode to be code attribute of response
                $("#authCode").val(data.code);
                
                var response = JSON.stringify(data, null, 4);
                $('#response1').html(response);
            })
            .error(function(jqXHR, textStatus, errorThrown) {
                $('#response1').html("The following error was returned: <br><br>" + jqXHR.responseText) 
            });
        }
    </script>
    <pre id="response1" class="code-json">(Response JSON will appear here...I hope.)</pre>
</body>

This is my latest attempt after Carsten's input. Now I'm getting a value to my text field, but it's an error: {"readyState":0,"status":0,"statusText":"error"}

    <HTML>
<head>
    <title>Ecobee API PIN TEST</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function PINCode() {
            
            apiKey = 'API_KEY'
            
            // set all apiKey inputs to have apiKey value entered
            $(".apiKey").each(function() {
                $(this).val(apiKey);
            });
            
            var url = 'https://api.ecobee.com/authorize?response_type=ecobeePin&client_id=' + apiKey + '&scope=smartWrite';
            $.getJSON(url,function(data) {
                // set authCode to be code attribute of response
                $("#authCode").val(data.code);
                alert("JSON Ran")
                var response = JSON.stringify(data, null, 4);
                $('#response1').html(response);
            })
            .fail(function(jqXHR, textStatus) {
                $('#response1').html("The following error was returned: <br><br>" + JSON.stringify(jqXHR) + "<p>Please Contact <b>M2 AV Consulting</b> at <a href=mailto:support@m2avc.com?subject='EcobeePINSupport'>support@m2avc.com</a>")
                console.log(textStatus);
            });
        })
    </script>
    <pre id="response1" class="code-json">(Response JSON will appear here...I hope.)</pre>
</body>
</HTML>

Carsten Massmann · Accepted Answer · 2021-06-26T08:07:55.197

You will have to actually call your function. Another issue is that .error() does not exist as a method of the Deferred-object in the current jQuery versions any more: "The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods are removed as of jQuery 3.0". I used .fail() instead.

function PINCode() {
            
            apiKey='API_KEY'
            
            // set all apiKey inputs to have apiKey value entered
            $(".apiKey").each(function() {
                $(this).val(apiKey);
            });
            
            var url = 'https://api.ecobee.com/authorize?response_type=ecobeePin&client_id=' + apiKey + '&scope=smartWrite';
            
            $.getJSON(url,  function(data) {
                // set authCode to be code attribute of response
                $("#authCode").val(data.code);
                
                var response = JSON.stringify(data, null, 4);
                $('#response1').html(response);
            })
            .fail(function(jqXHR, textStatus) {
                $('#response1').html("The following error was returned: <br><br>" + JSON.stringify(jqXHR))
                console.log(textStatus);
            });
        }
        PINCode()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="response1" class="code-json">(Response JSON will appear here...I hope.)</pre>

Thanks Carsten. I've made some changes and now get an error of {"readyState":0,"status":0,"statusText":"error"}. It looks like the $.getJSON isn't running properly and failing out. How best to go about troubleshooting that? Thank you. — M2AV, Jun 28 '21 at 06:48
Have you checked your console output. Obviously, I don't have the correct API-Key, but I get the response: "Access to fetch at 'https://api.ecobee.com/authorize?response_type=ecobeePin&client_id=API_KEY&scope=smartWrite' from origin 'https://www.somepage.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.". So, there seems to be a CORS related problem here. — Carsten Massmann, Jun 28 '21 at 08:50
Thanks Carsten. I'm going to mark this answered and open a different question for this CORS issue. I switched from $.getJSON to $.ajax so I could specify headers, but it still doesn't work. — M2AV, Jun 28 '21 at 23:07

score 0 · Answer 2 · answered Jun 26 '21 at 08:12

Carsten's answer is correct, though I'd like to add another point:
You can use the JQuery's native $(function PINCode() {...}).
It calls the function immediately, while also using the much faster $.ready.
Read more here: Difference between onload() and $.ready?

Javascript inside HTML and display JSON response

2 Answers2