Получение сохраненных данных JSON после завершения Ajax ⇐ Jquery

[Anonymous]

Сейчас я выполняю упражнения по Jquery, Ajax и JSON. Я нашел несколько способов получить данные, но теперь мне хотелось бы сохранить эти данные из JSON в переменную. Насколько мне известно, JSON — это всего лишь один большой массив объектов.

Мой файл JSON выглядит так:

{
"Products" : [{
"Id": 11,
"Name": "Keyboard",
"Description": "Microsoft Keyboard",
"PriceExVat": 199.95,
"QtyInStock": 11
},
{
"Id": 211,
"Name": "Mouse",
"Description": "Microsoft 3 button Mouse with scroller",
"PriceExVat": 199.95,
"QtyInStock": 30
},
{
"Id": 35,
"Name": "TowerCase",
"Description": "Mini Tower Case with 450W power unit",
"PriceExVat": 600.95,
"QtyInStock": 23
},
{
"Id": 58,
"Name": "Monitor",
"Description": "17inch LCD monitor",
"PriceExVat": 1499.95,
"QtyInStock": 12
}]
}


И мой код JQuery выглядит так:

var products;
$(document).ready(function(){
$.ajax({
type: 'GET',
url: 'data/Products.json',
data: { get_param: 'value'},
dataType: 'json',
complete: function(data){
products = data; //Store JSON data
}
});
});

$(document).ajaxComplete(function(){
alert(products); //returns object [Object]. When attempting to get data here like products[0].Name, an error occurs saying that Name does not exist
});


Причина, по которой я написал свой код таким образом, заключается в том, что я знаю, что ajax — это асинхронный javascript и xml. Итак, если бы я использовал успех : function(){..., не было бы никакой гарантии, что мои данные будут сохранены в переменных продуктах (т. е. проблема со временем).

Поэтому я установил код для ajax для сохранения данных после завершения операции. это вызовет событие ajaxComplete(), теоретически позволяя мне получить доступ к моим данным, которые я сохранил в переменной.

Однако здесь есть сбой, и причина моего вопроса. Если я предупреждаю(продукты), я получаю ответ

[img]https://i.sstatic. net/IXyYI.jpg[/img]


Немного изменю свой код (потому что теперь я думаю, что в этой переменной должно что-то храниться), чтобы alert(products.Products[ 0].Name); , ошибка выброшено (подразумевается, что эта переменная не определена)




Может ли кто-нибудь дать мне какой-нибудь совет, которому я могу следовать, чтобы получить данные? Цель этой переменной состоит в том, что я хотел бы использовать ее для разбиения на страницы в моей таблице, а также уменьшить количество вызовов файла json (который позже может стать удаленным размещенным файлом), вместо этого используя данные, хранящиеся в переменной.

Изменить
Изменено оповещение на console.Log

Object { ReadyState: 4, setRequestHeader: функция, getAllResponseHeaders: функция, getResponseHeader: функция, overrideMimeType: функция…

Не то, что я надеялся увидеть.

Редактировать
Видимо, я даже лог не смог нормально отобразить.

Object {readyState: 4, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…}
abort: function (a){a=a||"abort",p&&p.abort(a),w(0,a);return this}
always: function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this}
complete: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
done: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
error: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
fail: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
getAllResponseHeaders: function (){return s===2?n:null}
getResponseHeader: function (a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c}
isRejected: function (){return!!i}
isResolved: function (){return!!i}
overrideMimeType: function (a){s||(d.mimeType=a);return this}
pipe: function (a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()}
progress: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
promise: function (a){if(a==null)a=h;else for(var b in h)a=h;return a}
readyState: 4
responseText: "{
↵ "Products" : [{
↵ "Id": 11,
↵ "Name": "Keyboard",
↵ "Description": "Microsoft Keyboard",
↵ "PriceExVat": 199.95,
↵ "QtyInStock": 11
↵ },
↵ {
↵ "Id": 211,
↵ "Name": "Mouse",
↵ "Description": "Microsoft 3 button Mouse with scroller",
↵ "PriceExVat": 199.95,
↵ "QtyInStock": 30
↵ },
↵ {
↵ "Id": 35,
↵ "Name": "TowerCase",
↵ "Description": "Mini Tower Case with 450W power unit",
↵ "PriceExVat": 600.95,
↵ "QtyInStock": 23
↵ },
↵ {
↵ "Id": 58,
↵ "Name": "Monitor",
↵ "Description": "17inch LCD monitor",
↵ "PriceExVat": 1499.95,
↵ "QtyInStock": 12
↵ },
↵ {
↵ "Id": 234,
↵ "Name": "Laptop",
↵ "Description": "Acer Core I5 Laptop",
↵ "PriceExVat": 6999.95,
↵ "QtyInStock": 7
↵ },
↵ {
↵ "Id": 789,
↵ "Name": "CarryCase",
↵ "Description": "Targus Carry Case",
↵ "PriceExVat": 399.95,
↵ "QtyInStock": 20
↵ },
↵ {
↵ "Id": 7,
↵ "Name": "Harddrive",
↵ "Description": "1TB External Hard Drive",
↵ "PriceExVat": 999.95,
↵ "QtyInStock": 100
↵ },
↵ {
↵ "Id": 51,
↵ "Name": "Projector",
↵ "Description": "HD Projector",
↵ "PriceExVat": 4995.95,
↵ "QtyInStock": 1
↵ },
↵ {
↵ "Id": 901,
↵ "Name": "Joystick",
↵ "Description": "Microsoft Joystick",
↵ "PriceExVat": 400.95,
↵ "QtyInStock": 2
↵ },
↵ {
↵ "Id": 500,
↵ "Name": "USBCable",
↵ "Description": "3m USB-toUSB cable",
↵ "PriceExVat": 80.95,
↵ "QtyInStock": 5
↵ }]
↵}"
setRequestHeader: function (a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this}
state: function (){return e}
status: 200
statusCode: function (a){if(a){var b;if(s

Подробнее здесь: https://stackoverflow.com/questions/147 ... s-complete