javascript - YUI JSON - 解析中に新しいオブジェクトメンバーを追加するにはどうすればよいですか?

Question

ほぼ 2 日間、私は YUI JSON Utility: Adding new object members during parsing を取得しようとして立ち往生していました。

私はコーディングが初めてなので、これは非常に難しいです。さまざまな JS ファイル、参照、およびスクリプトをプロジェクトにドロップしようとした後、Configurator スクリプトを使用しました。

Explorer と Firefox でコードを実行してみました。ただし、結果の表は表示されません。

ページにエラーメッセージ "Error Getting Inventory Data" が表示されるため、コードが実行されます。これは、ページコードの try/catch エラーメッセージです。

テキストエディタのエラーコンソールのエラーメッセージは、データが表示されないことと関係がありますか?

テキストエディターのエラーコンソールにエラーが表示されます (行 76、列 12) - 不明な属性: エラーコンソールのセル間隔

Mozilla Firefox エラーコンソールにも次のエラーが表示されます。

 Error: ReferenceError: YUI is not defined
    Source File: http://localhost:53753/currency.html 
    Line: 87

Firefox が識別する 87 行目のコード行は次のとおりです。

<tr><td colspan="4">Click <em>Get Data</em></td></tr>

YUI ライブラリのサンプルコードは、http: //developer.yahoo.com/yui/examples/json/json_convert_values.htmlにあります。

ここに私の完全なコードがあります:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
        <title>Example: Adding New Object Members During Parsing</title>

    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
    <link rel="stylesheet" href="css/grids-min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/prettify-min.css">
    <link rel="shortcut icon" type="image/png" href="images/favicon.png">

</head>

<body> 
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->

    <div id="doc">
        <div id="hd">

        <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>

    </div>
        </div>
    <div id="demo">
        <p>Choose a currency, then get the data</p>

        <select>
        <option value="ARS">Argentine Peso</option>
        <option value="AUD">Australian Dollar</option>
        <option value="BRL">Brazilian Real</option>
        <option value="GBP">British Pound</option>
        <option value="CAD">Canadian Dollar</option>
        <option value="CNY">Chinese Yuan</option>
        <option value="COP">Colombian Peso</option>
        <option value="HRK">Croatian Kuna</option>
        <option value="CZK">Czech Koruna</option>
        <option value="DKK">Danish Krone</option>
        <option value="EEK">Estonian Kroon</option>
        <option value="EUR">Euro</option>
        <option value="HKD">Hong Kong Dollar</option>
        <option value="HUF">Hungarian Forint</option>
        <option value="ISK">Iceland Krona</option>
        <option value="INR">Indian Rupee</option>
        <option value="JPY">Japanese Yen</option>
        <option value="KRW">Korean Won</option>
        <option value="LVL">Latvian Lat</option>
        <option value="LTL">Lithuanian Lita</option>
        <option value="MYR">Malaysian Ringgit</option>
        <option value="MXN">Mexican Peso</option>
        <option value="NZD">New Zealand Dollar</option>
        <option value="NOK">Norwegian Krone</option>
        <option value="PHP">Philippine Peso</option>
        <option value="PLN">Polish Zloty</option>
        <option value="RUB">Russian Rouble</option>
        <option value="SGD">Singapore Dollar</option>
        <option value="SKK">Slovak Koruna</option>
        <option value="ZAR">South African Rand</option>
        <option value="LKR">Sri Lanka Rupee</option>
        <option value="SEK">Swedish Krona</option>
        <option value="TRY">Turkey Lira</option>
        <option value="USD" selected="selected">U.S. Dollar</option>
        <option value="CHF">Swiss Franc</option>
        <option value="TWD">Taiwan Dollar</option>
        <option value="THB">Thai Baht</option>
    </select>

        <input type="button" id="demo_go" value="Get Data">

    <table cellspacing="0">
        <caption>Inventory</caption>
            <thead>
        <tr>
            <th>SKU</th>
            <th>Item</th>
            <th>Price (USD)</th>
            <th>Price (<span>USD</span>)</th>
        </tr>
            </thead>
    <tbody>
        <tr><td colspan="4">Click <em>Get Data</em></td></tr>
     </tbody>
   </table>
 </div>

<!-- JS -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.8.1/build/yui-base/yui-base-min.js&3.8.1/build/json-parse/json-parse-min.js&3.8.1/build/json-stringify/json-stringify-min.js"></script>

<script>
    YUI().use("node", "io", "json-parse",function (Y) {

// Safari 4.0.3's native JSON does not support adding members during parse,
// so use JavaScript implementation for consistency
    Y.JSON.useNativeParse = false;

var example = {
    rates : {"USD":1,"EUR":0.6661,"GBP":0.5207,"AUD":1.1225,"BRL":1.609,"NZD":1.4198,"CAD":1.0667,"CHF":1.0792,"CNY":6.8587 ,"DKK":4.9702,"HKD":7.8064,"INR":42.0168,"JPY":109.8901,"KRW":1000,"LKR":107.5269,"MXN":10.1317,"MYR" :3.3167,"NOK":5.3277,"SEK":6.2617,"SGD":1.4073,"THB":33.7838,"TWD":31.1526,"VEF":2.1445,"ZAR":7.6923 ,"BGN":1.3028,"CZK":16.0514,"EEK":10.4275,"HUF":158.7302,"LTL":2.2999,"LVL":0.4692,"PLN":2.1758,"RON" :2.3804,"SKK":20.2429,"ISK":4.8008,"HRK":81.3008,"RUB":24.3309,"TRY":1.1811,"PHP":44.2478,"COP":2000 ,"ARS":3.1289},

    currency : 'USD',

    convert : function (k,v) {
        // 'this' will refer to the object containing the key:value pair,
        // so this step will add a new object member while leaving the original
        // intact (but formatted to two decimal places).  If the original
        // is not needed, just return the converted value.

        if (k === 'Price') {
            var x = Math.round(v * example.rates[example.currency] * 100) / 100;
                this.convertedPrice = x.toFixed(2); // added to item
                    return v.toFixed(2); // assigned to item.Price
        }
        return v;
    },

    updateTable : function (inventory) {
        // Update the column header
        Y.one('#demo table th span').set('innerHTML',example.currency);

        var tbody = Y.one('#demo table tbody'),
            html  = ['<table><tbody>'],
            rowTemplate = '<tr><td>{SKU}</td><td>{Item}</td><td>{Price}</td><td>{convertedPrice}</td></tr>',
            i, len;

        if (inventory) {
            for (i = 0, len = inventory.length; i < len; ++i) {
                html.push(Y.Lang.sub(rowTemplate, inventory[i]));
            }
        } else {
            html.push('<tr><td colspan="4">No Inventory data</td></tr>');
        }

        html.push('</tbody></table>');

        tbody.replace(Y.Node.create(html.join('')).one('tbody'));
    }
};

Y.one('#demo_go').on('click', function (e) {
    // Disable the button temporarily
    this.set('disabled',true);

    // Store the requested currency
    var sel = Y.one("#demo select");
    example.currency = sel.get("options").item(sel.get("selectedIndex")).get("value");

    Y.io('js/json-convert-values-response.json',{
        timeout : 3000,
        on : {
            success : function (xid, res) {
                var inventory;
                try {
                    inventory = Y.JSON.parse(res.responseText,example.convert);

                    example.updateTable(inventory);
                }
                catch(e) {
                    alert("Error getting inventory data");
                }
                finally {
                    Y.one('#demo_go').set('disabled',false);
                }
            },
            failure : function () {
                alert("Error getting inventory data");
            }
        }
    });
});

// Expose example objects for inspection
YUI.example = example;
});
</script>
    </body>
        </html>

更新 - これらの JSON の例は、XHR を使用して JSON データを取得しているため、jsfiddle では機能しないようです。そのデータはサーバーに存在しないため、ファイルされます。フィドルは無視してください

ここに私の問題の JS Fiddle があります。誰かがこれを機能させるのを手伝ってくれますか?

解析中の新しいオブジェクトメンバーの追加: http://jsfiddle.net/DanyB/3ntvw/

見てくれた親切な人に感謝します。

score 0 · Accepted Answer

Bergi が上記のコメントで述べているように、スクリプトが十分に早くロードまたは実行されなかったようです。

1つの可能な解決策...

そうであることを確認するには、HTML のヘッドで YUI スクリプトタグを宣言する必要があります。最初にそれを試して、問題が解決するかどうかを確認してください。でも...

...

準備が整うまで待機

他のコードもヘッドに配置する必要がありますが、ドキュメント全体が読み込まれたときにのみ読み込まれるように指定してください。

これを行う最も簡単な方法は次のとおりです。

window.onload = function () { // what to do when window has loaded
    YUI().use("node", "io", "json-parse",function (Y) {

    // ... the code in your callback function, as provided above ...

    }); // end callback -- UPDATED
}; // end window onload function

YUI には独自のコード処理方法があり、ドキュメントの準備が整ったときにそれを実行する必要があります...

YAHOO.util.Event.onDOMReady

しかし、あなたの問題はYUI定義されていないことにあるので、これが役立つかどうかはわかりません.

...

チェックとセーフガードのパターン?

より洗練されたパターンには、断続的なチェックを設定してが定義されているかどうかを確認し、YUI定義されたらチェックをキャンセルして、必要なコードを実行することが含まれます。これは、呼び出されたメソッドを使用し、次のsetInterval()ようになります。

var checkYUI = setInterval(function() { // create a function to be executed within the interval and assign the interval to a global variable
    if (YUI) { // check the global variable `YUI` exists
        clearInterval(checkYUI); // cancel the interval check
        YUI().use("node", "io", "json-parse",function (Y) { // now we know `YUI` exists call its `use()` method
            // ... the code in your callback function, as provided above ...
        }
    }
}, 100); // checks every 100 ms

YUIたとえば、それがオブジェクトであるか、use()メソッドを持っているかなどをチェックすることで、チェックをさらに複雑にすることができます。

以前の試行で何をして成功したのかはわかりませんが、この試行は失敗しましたが、そのようなチェック/セーフガードが既に実施されているかどうかを確認するためにそれらを調査する価値があるかもしれません.

score 0 · Accepted Answer

昨日の朝、ようやくこの JSON スクリプトを機能させることができました。ただし、それは問題を回避することによるものでした。そうは言っても、根本的な原因もついに特定できたと確信しています-それを修正することはできません.

以下に、コードを実行する方法を文書化し、最後に調査した領域のリストを示します。待ちきれない人のために、JSON ファイル名を .JS に変更し、ファイルパスも .JS に変更しました。

私の研究は広範であり、文書化されていれば、同じまたは同様の状況に直面している他の誰かを助けるかもしれません. また、私のアプローチについても詳しく説明しました。このアプローチはほとんどの人にとって常識ですが、誰かが問題の根本に到達するのに役立つ場合があります。

ところで、YUI フォーラムの Juan に感謝します。彼の言葉を借りれば、問題が JSON ファイルが正しくロードされていないことに関連していることを前もって確認した「2 番目のペア」を提供してくれました。彼はまた、私に時間を割いてくれました - 感謝しています。

ページを Firefox で実行すると、エラーコンソールを使用できました。これは最初のうちだけ役に立ちましたが、例に特に関連するコード以外の余分なコードを削除した後、サイトスクリプトが機能していなくても Firefox コンソールでエラーが発生しませんでした。

ただし、Firefox エラーコンソールは早い段階で 2 つのエラーを表示しました。1 つはサーバーが呼び出しに応答しないことに関連し、もう 1 つはサーバー (IIS 7.0) を指している JSON MIME タイプの問題があったことを示しています。

次に、スクリプト内の try/catch エラーメッセージを変更して、それらをすべて異なるものにしました。次に、どのアラートが表示されているかによって、スクリプトのどの時点でアプリケーションが失敗したかを確認できました。

この時点に到達する前に、Google で回答を検索するのを少し脇道に追いやったことがありますが、それは簡単です。目の前にあるものに整然と取り組むことで、特定の問題により直接的を絞ることができるようになりました。

JSON ファイルが実行されないという問題があることはわかっていました。また、サーバーが応答していないことと、サーバーが MIME タイプを認識していないこともわかりました。したがって、サーバー上で MIME タイプの問題をソートすると、サーバーが JSON ファイルを認識して実行する可能性が高くなりました。

新しい JSON MIME タイプを追加するために、次のリンクにある Microsoft IIS ナレッジベースにアクセスし、IIS 7.0 を設定して JSON ファイルを管理する方法に関する説明を読みました。十分な数の JSON ファイルが既知のファイルタイプとして IIS マネージャーにリストされていないことを確認しました。 .

新しい MIME タイプ = JSON ファイル名拡張子 - .json MIME タイプの説明 = application/json

http://technet.microsoft.com/en-us/library/cc725608%28v=ws.10%29.aspx

サイトはまだ機能しないので、もっと詳しく調べました。さらに調査したところ、新しい JSON MIME タイプのハンドラーマッピングを構成する必要があることがわかりました。ここでも Microsoft IIS サイトを使用しました: (評判ポイントが不十分なため、リンクを削除しました)

場合によっては web.config を変更する必要があるかもしれないので、別の MS リンクを次に示します。

(評判ポイントが不十分なため、リンクは削除されました)

C/Windows/system32/inetsrv/asp.dll からの ASP.DLL が見つからないため、ここでも問題が発生しました。

これを克服するために、システムの別の場所から別のコピーを見つけ、そのファイルを inetsrv フォルダーにコピーしました。サイトはまだ機能していませんでしたが、システムには少なくとも 1 つの 32 ビット asp.dll ファイルと 1 つの 64 ビット asp.dll ファイルが必要であることがわかりました。私は間違ったビットの asp.dll を inetsrv フォルダーにコピーしたと思いますが、どれがどれであるかを特定できませんでした。それで、それが私がたどり着いたところです。

それから、JSON ファイルを開く方法についてもっと学ぼうと基本に戻りました。「JSON は形式ではなく手法です」と述べた Colanth という男からの yahoo 回答の投稿に出くわしました。

このステートメントについてさらに考えてみると、単純な JSON 呼び出し関数の作成に焦点を当てた別の JSON チュートリアルが見つかりました。

(評判ポイントが不十分なため、リンクは削除されました)

チュートリアルでは、「JSON は手法である」という概要も示されていることに注意して、読み進めました。チュートリアルでは、JSON が JavaScript であることを詳しく説明しました。

次に、JSON が形式ではなく JavaScript が形式である場合、JSON ファイルのファイル名を .js に変更し、システムが JavaScript を認識して何が起こるかを確認するため、JSON ファイルのパスを .js に変更する必要があることに気付きました。

だから私はやった、そしてブラム！(Dog the Bounty Hunter の言葉を借りれば) すべてうまくいきます!

確かに、MIME タイプと不足している asp.dll の問題を並べ替える必要があります。Visual Studio 2010 for VS2012 をアンインストールし、VS2010 の削除により asp.dll ファイルが削除された可能性があるため、asp.dll が欠落している可能性があると思います。VS2012 は VS2010 のインストール済みバージョンに基づいて構築されているため、VS2012 は asp.dll が既にインストールされていると想定していた可能性があることを理解しています。その場合、VS2010はそれを削除すべきではなかったと言っています。知るか？

また、JSON ファイルは何らかの理由で JSON ファイルであるため、その問題の根底に到達する必要があります。しかし、多くのハードワークの後、私はしばらくの間回避策を持っています。

私がチェックした他のいくつかのことは、あなたにもいくつかのアイデアを与えるかもしれません：

URL、ファイルパス、およびファイル名

localhost – サイトと応答ファイルが実行されているポート

アイデアのバリデーターを使用した JSON スクリプト: http://jsonlint.com/

エラーやタイプミスがないかコードをチェックする

2.0 および 4.0 モードで IIS を実行してみてください

JSON の web.config スクリプトを確認する

html、aspx、cshtml、および php Web サイトでコードを実行してみました

JSON ファイルを別の場所に移動しようとしました。JSON ファイルのパスを確認する

Configurator を使用して、ローカルと外部の両方でさまざまな YUI 構成を試しました。

さまざまなブラウザのセキュリティ設定を調べました

security.fileuri.strict_origin_policy の Firefox about:config: を変更しました

コード内のタイムアウト設定の増加

システムが JSON MIME タイプを処理していることを確認する

IIS のバージョンは正しいですか 5.0、6.0、7.0、7.5 など

サーバーの WCF 設定を確認する

コードを変更

グローバル設定を変更する

javascript - YUI JSON - 解析中に新しいオブジェクト メンバーを追加するにはどうすればよいですか?

2 に答える 2

Related

Reference

javascript - YUI JSON - 解析中に新しいオブジェクトメンバーを追加するにはどうすればよいですか?