Как реализовать get запрос и задать параметр через функцию?

Question

[testree]

Привет всем.
Задача стояла такая: получить данные через get запрос, используя js.
Работает только через прокладку https://cors-anywhere.herokuapp.com ибо ругается на CORS. Решить иначе не смог. Делал через хостинг также. Не помогает. Но да ладно.

Написал функцию, которая должна получать параметры (какой ключ вытащить, есть ли разделитель, если есть разделитель, то получить позицию)

function parseDateFromGererator(param,separator=false,position) {
        var xhr = new XMLHttpRequest(),
            method = "GET",
            url = "https://cors-anywhere.herokuapp.com/https://api.namefake.com/english-united-kingdom/male";
        
        xhr.open(method, url, true);
        xhr.onreadystatechange = function () {
            if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                response = JSON.parse(xhr.responseText);
                if (separator) {
                    console.log(response.param.split(separator)[position]);
                }
                else {
                    console.log(response.param);
                }
                console.log('name -' +param + ' surname -' + surname)
            };
        };
        xhr.send();
    };

Но я не знаю как получить у response мой param, который я передаю через функцию

generateButton.addEventListener("click", function () {
        name.innerHTML = parseDateFromGererator(param="name",separator=false,0);
    })

Пишет undefined. Надеюсь, что я обьяснил правильно и кто-то сможет помочь или исправить функцию
Вот живой пример https://jsfiddle.net/6pm3L5og/1/

Answer 1

[Alex]

1. Не используйте XMLHttpRequest. Просто. не надо.
   
2. Функция parseDateFromGererator должна что-то возвращать. В вашем случае какие-то данные.
   
3. response.param -- вы ищите поле "param" у ответа. Чтобы использовать переменную нужен такой синтаксис: response[param].
   

Если хотите разобраться, вот вам пример:

Comments

[testree]

1. А что использовать? fetch?

[Alex]

testree,

fetch?

да. Чтобы использовать что-то другое, тот же XMLHttpRequest, нужны веские аргументы. Но по-умолчанию стоит брать простой fetch, я так считаю.

[testree]

Alex, а из-за чего так медленно генерируются данные? Это из-за прокладки? https://cors-anywhere.herokuapp.com/

Answer 2

[Kostya10295]

1) У responce нет свойства param
2) Ваша функция ничего не возвращает
3) ajax запросы являются асинхронными, поэтому name.innerHTML надо добавить в колбек

Comments

[testree]

1) я понимаю, что у него нет свойства param. Этот param должен браться из функции. Типа param это и есть свойство какое-то, которое я передаю. Например, в функции передал param=name. и это Name должно подставиться в response.name
2) просто return заюзать?
3) а как это сделать? Ибо я только разбираюсь

[Kostya10295]

xhr.onreadystatechange = function () {
            if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                response = JSON.parse(xhr.responseText);
                if (separator) {
                    console.log(response.param.split(separator)[position]);
                }
                else {
                    console.log(response.param);
                }
                name.innerHTML=response.name;
                console.log('name -' +param + ' surname -' + surname)
            };
        };

[testree]

Kostya10295, это не то) вот вы насильно написали responce.name. А я говорю, чтобы name передавался как аргумент через функцию.

[Kostya10295]

testree, 1) - тогда пишите не response.param, a response[param]

[testree]

Kostya10295, спсибо)