jquery - Ajax の完了後に保存された JSON データを取得する

Question

現在、Jquery、Ajax、JSON の演習を行っています。データを取得する方法をいくつか見つけましたが、このデータを JSON から変数に格納したいと考えています。私の知る限り、JSON は 1 つの巨大なオブジェクト配列にすぎません。

私の 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 であることを知っているからです。したがって、を使用する場合success : function(){...}、データが変数に保存されるという保証はありませんproducts(つまり、タイミングの問題)。

そこで、操作が完了したときにデータを格納する ajax のコードを設定しました。これによりajaxComplete()イベントが発生し、理論的には、変数に保存したデータにアクセスできるようになります。

ただし、ここには問題があり、それが私の質問の理由です。もし私ならalert(products)、私は応答を得る

返されたデータ 1

コードを少し変更すると (その変数に何かが格納されているはずなので)、alert(products.Products[0].Name);エラーがスローされます (この変数が未定義であることを意味します) 。

応答エラー

データを取得するために誰かが私に従うことができるアドバイスはありますか? この変数の目標は、変数に格納されたデータを使用することで、テーブルへのページ付けに使用し、json ファイル (後でリモートホストファイルになる可能性があります) への呼び出しの量を減らすことです。

変更されたアラートを console.Log に編集

オブジェクト {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[b]=h[b];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<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this}
statusText: "OK"
success: 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}
then: function (a,b,c){i.done(a).fail(b).progress(c);return this}
__proto__: Object

score 0 · Accepted Answer

そこで、いじくり回して parseJSON メソッドを見つけました。Ajax Response で見たデータから、Ajax ResponseText (これが必要なデータでした) を取得し、それを変数に格納して、JSON に解析できると考えました。

作業中の製品を見よ：

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

        $(document).ajaxComplete(function(){            
            products = $.parseJSON(products.responseText); //Takes AJAX Reponse Text and parses it to JSON
            console.log(products.Products[0].Name);
        });

jquery - Ajax の完了後に保存された JSON データを取得する

2 に答える 2

Related

Reference