Почему мой текст ответа XMLHttpRequest имеет значение null? - PullRequest
0 голосов
/ 07 августа 2020

Я новичок в Javascript и jQuery, и я только что получил этот фрагмент кода, который мне нужно попробовать и исправить. Итак, я пытаюсь получить данные с внешнего веб-сайта, который содержит строку в формате JSON. Он содержит массив {"data": [64759.148,44942.848712]}, который я пытаюсь распечатать на своем веб-сайте. Сначала я столкнулся с ошибкой Access-Control-Allow-Origin, которую смог исправить. Однако я все еще не могу получить данные с этого веб-сайта. Журнал консоли показывает NaN NaN, поэтому в моей функции get_live_data () есть ошибка, из-за которой мой проанализированный текст ответа равен нулю. Что я делаю не так?

jQuery(function(){
    var counter1 = jQuery('#kwh-counter').jOdometer({ counterStart:'0000000000', numbersImage:'http://staging.five.my/glt/wp-content/uploads/2020/06/meter-num.png', heightNumber:25, spaceNumbers:1 });
    var counter2 = jQuery('#co2-counter').jOdometer({ counterStart:'0000000000', numbersImage:'http://staging.five.my/glt/wp-content/uploads/2020/06/meter-num.png', heightNumber:25, spaceNumbers:1 });
    
    function get_live_data(){
    var xmlhttp = new XMLHttpRequest();
        var url = "mywebsiteurl";
        var kwh = 0;
        var co2 = 0;
        
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myArr = JSON.parse(this.responseText);
                kwh = parseFloat(myArr[0]);
                co2 = parseFloat(myArr[1]);
                console.log(kwh, co2);
            }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    counter1.goToNumber(Math.round(kwh));
    counter2.goToNumber(Math.round(co2));
    setTimeout(function(){ get_live_data(); }, 5000); // 5 seconds
        
    }
    
    jQuery(document).ready(function(){
        var curr_pos = 0;
        var timer_id = 0; 

        function rotate_img(){ 
            if(curr_pos == -1833) curr_pos = 0;
            else curr_pos = curr_pos - 47;
            jQuery("#kwh-meter").css("background-position", "0px " + curr_pos + "px");
            if(curr_pos == -1833) curr_pos = 0;
        }
        function start_rotate(){
            timer_id = setInterval(rotate_img, 100);
        }
        function stop_rotate(){
            clearInterval(timer_id);
        }
        
        start_rotate();
        get_live_data();
    });
});

1 Ответ

0 голосов
/ 07 августа 2020

Переместите kwh и co2 в правильную область действия.

    function get_live_data(){
    var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myArr = JSON.parse(this.responseText);
                kwh = parseFloat(myArr[0]);
                co2 = parseFloat(myArr[1]);
                console.log(kwh, co2);

                // move these 2 lines here
                counter1.goToNumber(Math.round(kwh));
                counter2.goToNumber(Math.round(co2));
            }
        };
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...