Как вурнуть массив из ajax?

Question

[Сергей Беляков]

Добрый день! Столкнулся с проблемой, помогите разобраться.
Есть ajax запрос который обращается в php, и тот отдает массив. Ajax его получет успешно. В console.log(JSON.stringify(res)); выглядет вот так.

{"id":"1",
"quest":"Мое слово всегда совпадает с делом.",
"resoult_quest":null,
"skip":null},
{"id":"2",
"quest":"Если я хочу что-нибудь сделать, но окружающие считают, что этого делать не стоит, то я готов отказаться от своих намерений.",
"resoult_quest":null,
"skip":null},

Далее мой js файл уже должен работать с этим массивом. Но вот вернуть его для того чтобы с ним работать я не могу, потому что Ajax - возвращает целую кучу объектов, а мне нужен только мой массив

Вот мой код,

array = $.ajax({ // получаем массив вопросов
            type: "POST",
            url: '/site/questions',
            cache: false,
            dataType: 'json',
            global: false,
            async:false,
            success: function (res) {
                return res;
            }});
console.log(array );

Я получаю вот что:


Как мне получить массив в таком виде?

{"id":"1",
"quest":"Мое слово всегда совпадает с делом.",
"resoult_quest":null,
"skip":null},
{"id":"2",
"quest":"Если я хочу что-нибудь сделать, но окружающие считают, что этого делать не стоит, то я готов отказаться от своих намерений.",
"resoult_quest":null,
"skip":null},

Comments

[Антон]

Создать функцию, которая будет вызываться в теле success и передавать res в качестве параметра, а там уже производите с ним что хотите. И, это не массив.

Answer 1

[Сергей Беляков]

В общем кажется у меня получилось. Вот как нужно было сделать! Всем спасибо!

var arr = [];


    $.ajax({ // получаем массив вопросов
        type: "POST",
        url: '/site/questions',
        cache: false,
        dataType: 'json',
        global: false,
        async:false,
        success: function (res) {
            console.log(JSON.stringify(res));
            getArray(res);
        }});

    function getArray(res) {
        // console.log(JSON.stringify(res));
        arr = JSON.stringify(res);
    }

    console.log(arr);

Comments

[DanKud]

У вас это получилось только по причине того, что вы указали свойство async: false, но это в корне неверный подход, который будет блокировать страницу до моменты выполнения AJAX-запроса.

Answer 2

[DanKud]

Потому что это работает не так, как вы подумали. Вы присваиваете своей переменной ссылку на сам AJAX-объект, а не результат выполнения AJAX-запроса. С данными полученными в AJAX-запросе вам нужно работать именно в коллбэк-функции. То есть вот так:

success: function (res) {
    /* здесь весь остальной код для работы с данными полученными в запросе */
}});

Или прописать отдельную функцию и передавать ее имя:

function customFunc(res) {
    /* здесь весь остальной код для работы с данными полученными в запросе */
}

$.ajax({ // получаем массив вопросов
    .....
    success: customFunc
});

А присвоить эти данные переменной можно только через промис. Например так:

(async () => {
    let array = await new Promise(resolve => {
        $.ajax({ // получаем массив вопросов
            type: "POST",
            url: '/site/questions',
            cache: false,
            dataType: 'json',
            global: false,
            success: function (res) {
                return resolve(res);
            }
        });
    });
    console.log(array); /* вот сейчас в переменной будет то, что вам нужно */
})();

Comments

[Сергей Беляков]

DanKud Я не слишком силен в JS, Ну я пробовал вот так:

var arr = [];


    $.ajax({ // получаем массив вопросов
        type: "POST",
        url: '/site/questions',
        cache: false,
        dataType: 'json',
        // global: false,
        // async:false,
        success: function (res) {
            // console.log(JSON.stringify(res));
            return getArray(res);
        }});

    function getArray(res) {
        arr = res;
    }

    console.log(arr);

Возвращает вот что:


А ваш код php shtorm вообще все красным подчеркиет(простите за глупый вопрос почему?) Мне наверно на php его выполнять нужно?

(async () => {
    let array = await new Promise(resolve => {
        $.ajax({ // получаем массив вопросов
            type: "POST",
            url: '/site/questions',
            cache: false,
            dataType: 'json',
            global: false,
            success: function (res) {
                return resolve(res);
            }
        });
    });
    console.log(array); /* вот сейчас в переменной будет то, что вам нужно */
})();

[DanKud]

А ваш код php shtorm вообще все красным подчеркиет(простите за глупый вопрос почему?) Мне наверно на php его выполнять нужно?

Не знаю почему красным подчеркивает, но только так можно присвоить переменной результат выполнения AJAX-запроса для работы с этой переменной в дальнейшем коде. Это тот же самый JS, а не PHP.

[DanKud]

Сергей Беляков, но опять же если вы вообще новичок в JS, то лучше пока забудьте про промисы и этот код. Просто работайте с полученными данными из AJAX-запроса внутри коллбэк-функции, а не за ее пределами. За пределами этой функции тех данных, которые вам нужны, не будет:

$.ajax({ // получаем массив вопросов
    type: "POST",
    url: '/site/questions',
    cache: false,
    dataType: 'json',
    // global: false,
    // async:false,
    success: function (res) {
        /* здесь весь остальной код для работы с данными полученными в запросе */
    }
});

/* здесь, за пределами функции, этих данных у вас не будет
точнее конечно будут, после выполнения запроса, но есть нюансы, которые пока лучше отложить */

[Ihor Bratukh]

Сергей Беляков, включите es6 в шторме

Answer 3

[Владимир]

Используйте fetch
https://developer.mozilla.org/en-US/docs/Web/API/F...

function postData(url = '', data = {}) {
  // Значения по умолчанию обозначены знаком *
    return fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(data), // тип данных в body должен соответвовать значению заголовка "Content-Type"
    })
    .then(response => response.json()); // парсит JSON ответ в Javascript объект
}