Записать данные json в переменную

Question

$.ajax({   
    url: 'http://atom-web.github.io/wattson/style-components/sity.json',
    success: function(data){
        var test = data;
    },
});
console.log(test);

Нужно загрузить json и записать его данные в переменную, что бы я смог вытаскивать разную информацию из переменной в любой момент. Не могу понять как это сделать!

Answer 1

var test = JSON.parse( data );

И консоль должна быть внутри success, а не под запросом, потому что запрос не синхронный

Answer 2

Т.к. ajax - асинхронная операция, то она может длиться и 2 секунды и 22 секунды, хотя в это время может и страницу прогрузиться и пользователь что-то понажимать.

Если я правильно разглядел, то никакая работа не предполагается, пока не будет загружен json. Отсюда есть минимум один выход: вешать картинку "loading" перед запросом и убирать после получения ответа. Можно это сделать на весь экран, чтоб пользователь ничего не трогал.

let test = null;

$.ajax({   
    url: 'http://atom-web.github.io/wattson/style-components/sity.json',
    beforeSend: function( xhr ) {
        // Здесь включаем какой-то loader.gif чтобы дать пользователю понять,
        // что идёт загрузка данных
    },
    success: function(data){
        test = data;
        // Здесь выключаем loader.gif и разблокируем элементы,
        // чтобы пользователь мог начать работать
    },
});

Также можно обратить внимание на async/await функции, что позволит дождаться загрузки аякса и тоже выполнять функции далее.

Answer 3

Нашел ответ, всем спасибо

function getFileSity(fileName){
    let  request = new XMLHttpRequest();
    request.open('GET', fileName, false);
    request.send(null);
    return  JSON.parse(request.responseText);
}
let sityData = getFileSity('http://atom-web.github.io/wattson/style- 
components/sity.json');

console.log(sityData);

Answer 4

Крайне рекомендую использовать этот код

const wAjax=(_url)=>{
    return new Promise((resolve)=>{
        $.ajax({
            url: _url,
            type: 'GET',
            async: true, // Асинхронно!
        }).done((r)=>{
            if(!r)r = false;
            resolve(r);
        }).catch((e)=>{
            console.log(e.status, e.responseText, e);
            resolve(false);
        });
    });
};

// Три запуска на выбор (из клика можно запускать func() и убрать async)

(async()=>{
    let x = await wAjax('http://atom-web.github.io/wattson/style-components/sity.json');
    console.log(x);
})(); // autostart by ()

$('#mybutton').click(async()=>{
    let x = await wAjax('http://atom-web.github.io/wattson/style-components/sity.json');
    console.log(x);
});

const func=async()=>{
    let x = await wAjax('http://atom-web.github.io/wattson/style-components/sity.json');
    console.log(x);
};
// func(); // start

БЛОГ НА HUSL

Записать данные json в переменную

Ответы (4 шт):