Как я могу вернуть пользовательский ответ на запрос XMLHTTP?

Question

Получение данных из API акций, получение всех имен символов. Я беру строковый символ из ввода HTML и использую это значение для соответствия символам, извлеченным из API.

Я хочу вернуть простое логическое значение, если оно найдено, которое я добавил в метод request.onload. Когда я вызываю / получаю ответ от другого метода, я получаю либо неопределенный, либо текстовый ответ объекта.

Я добавил прослушиватель событий «load» в обработчике нажатий кнопок, я попытался добавить булеву переменную в методе request.send, я добавил прослушиватель изменения состояния готовности, который, кажется, помогает, но без типа ответа возвращает логическую переменную из метода onload.

const searchInput = document.getElementById("symbol-search-input");
const symbolSearchBtn = document.getElementById("symbol-search-btn");
const symbolSearchMsg = document.getElementById("symbol-status-msg");
const request = new XMLHttpRequest();

symbolSearchBtn.addEventListener("click", () => {

    //Value from html input
    let symbolSearch = searchInput.value;

    if(symbolSearch == "") {
        symbolSearchMsg.innerHTML = "symbol field blank";

    } else {
        //calling XMLHTTPRequest to begin the process
        symbolFound();

        request.onreadystatechange = () => {
            if(request.readyState == 4) {

                if(request.status == 200) {
                    //Below it only returns the entire JSON as text even if I only use "request.response"
                    console.log(request.responseText);

                }

                if(request.status == 404) {
                    console.log('File or resource not found');
                }

            }
        };


let symbolFound = () => {

    request.open('GET', 'https://api.iextrading.com/1.0/ref-data/symbols', true);
    let foundSymbol = false;

    request.onload = function() {
        let data = JSON.parse(this.response);

        if(request.status >= 200 && request.status < 400) {
            let symbolInput = searchInput.value.toUpperCase();

            for(let i = 0; i < data.length; i++) {
                if(data[i]['symbol'] === symbolInput) {
                    foundSymbol = true;
                    break;
                }
            }
            return foundSymbol;

        } else {
            console.log("error");
        }
    };

    request.send();
};

Я ожидаю получить логическое возвращение (true или false), вместо этого я получаю JSON от API в виде текста / строки.

Answer 1

Я разобрался, как это сделать, хотя бы обходной путь. Вместо того, чтобы возвращать какое-либо значение, я просто заставил его изменить состояние переменной и вызвал другую функцию, чтобы сделать то, что мне нужно, с логическим значением. Это был также вопрос разбора начальной функции. Проверьте это.

const searchInput = document.getElementById("symbol-search-input");
const symbolSearchBtn = document.getElementById("symbol-search-btn");
const symbolSearchMsg = document.getElementById("symbol-status-msg");
let isSymbolFound;


symbolSearchBtn.addEventListener("click", () => {

    let symbolSearch = searchInput.value;

    if(symbolSearch == "") {
        symbolSearchMsg.innerHTML = "symbol field blank";

    } else {
        isSymbolFound = false;
        const xhr = new XMLHttpRequest();
        xhrProcess(xhr);

        xhr.onload = function() {
            let data = JSON.parse(this.response);

            if(xhr.status >= 200 && xhr.status < 400) {
                let symbolInput = symbolSearch.toUpperCase();

                for(let i = 0; i < data.length; i++) {
                    if(data[i]['symbol'] === symbolInput) {
                        isSymbolFound = true;
                        break;
                    }
                }
                symbolFindProcess();

            } else {
                console.log("error");
            }
        };
    }
});

const symbolFindProcess = () => {
    if(isSymbolFound) {
        //code here
    } else {
        //code here
    }
};

const xhrProcess = (request) => {
    request.open('GET', 'https://api.iextrading.com/1.0/ref-data/symbols', true);
    request.send();
};