2

JSON データ ストリームを手動で作成して、クライアント側アプリケーションをデバッグしたいと考えています。Google Chrome のデバッグ コンソールでこれができることを期待していました。

たとえば、次のケースを考えてみましょう。リスト作成コード セグメントがどのように機能するかをテストしたいと考えています。{"name" : "test", "price" : "10"} という形式の項目オブジェクトがあるとします。これをサーバー上で実際にコーディングする代わりに、このデータをローカルで生成し、テスト目的で送信したいと考えています。

Javascript は次のようになります。

//JQuery AJAX call to request data
$.getJSON('some_url', function(data) {

     //Go through each received JSON element (assuming array input) and
     //log its key value pair to the debug console (using Google Chrome as example)
     $.each(data, function(key, val) {
          console.log("Key is: " + key + " value is: " + value);
     }

});//End getJSON

次のように、データのリストを作成したいと思います (おそらくテキスト ファイルでしょうか?)。

{"name" : "paper", "price" : "5"}
{"name" : "bear repellent", "price" : "10"}

次に、このデータを関数に渡して、機能するかどうかを確認し、出力を確認したいと思います (ここでは、console.log() 呼び出しによって達成されます)。これが単体テストに似ていることは理解しています。私の調査によると、これは REST クライアントの仕事である可能性があります。ただし、これを達成する方法がわかりません。入力をお待ちしております。

4

2 に答える 2

0

テキスト ファイルを作成するという考えは、間違いなく正しい方向に進んでいます。実際、必要な作業はこれだけです。JSON データをテキスト ファイルに入れ、$.getJSON()呼び出しでそのテキスト ファイルへの URL を使用します。純粋な JSON の場合、このファイルは HTML ページと同じドメインからロードする必要があります (実際、通常は$.getJSON()呼び出しで相対 URL を使用します。

したがって、最初に行うことは、データに対して有効な JSON を作成することですが、まだそうではありません。

[
    { "name": "paper", "price": "5" },
    { "name": "bear repellent", "price": "10" }
]

空白は重要ではありません。空白は好きなようにフォーマットできます。

JSON をjsonlint.comに貼り付けることで、有効な JSON があることをテストできます。

したがって、そのデータを'testdata.json'HTML ページと同じディレクトリで呼び出されるテキスト ファイルに入れると'testdata.json'、呼び出しで URL として使用でき$.getJSON()ます。

また、このコードは書かれているとおりに意味をなさないか、少なくとも名前が誤解を招くものです。

// Go through each received JSON element (assuming array input) and
// log its key value pair to the debug console (using Google Chrome
// as example)
$.each(data, function(key, value) {
    console.log("Key is: " + key + " value is: " + value);
});

(このコードのコピーでいくつかの単純なタイプミスを修正しました。)

これ$.each()は配列全体を反復処理するため、console.log()呼び出しは次のように出力されます。

Key is: 0 value is: [object Object]
Key is: 1 value is: [object Object]

より有用な出力を取得するためにできることの 1 つは、console.log()呼び出しで文字列を連結する代わりに、個々の引数をコンマで区切って使用することです。

console.log( "Key is: ", key, " value is: ", value );

valueはオブジェクトであるためconsole.log()、このように別の引数として渡す機会があれば、そのようにログに記録できます。演算子を使用して文字列に連結すると、それ+が失われます。

しかし、もっと重要なことは、必要なコードはおそらく次のようなものです。

// Loop through the elements of the JSON array, and for each one
// log its `name` and `price` properties.
$.each( data, function( i, item ) {
    console.log(
        'Item number:', i,
        '| name:', item.name,
        '| price:', item.price
    );
});

印刷する必要があります：

Item number: 0 | name: paper | price: 5
Item number: 1 | name: bear repellent | price: 10

(縦棒は重要ではありません。出力を少し整形するためのものです。)

また、配列を JSON データのトップ レベルとして使用するのではなく、代わりにオブジェクトにして、その中に配列を配置することをお勧めします。

{
    "items": [
        { "name": "paper", "price": "5" },
        { "name": "bear repellent", "price": "10" }
    ]
}

コードで行う必要がある唯一の変更は、$.each(data.items,...)代わりに を使用することです$.each(data,...)。

これを行う主な理由は、より将来性があるためです。配列内の 1 つの項目に関係なく、データ/配列全体に適用される情報を後で JSON 応答に追加したい場合はどうすればよいでしょうか? 最上位でオブジェクトを使用すると、これが簡単になります。

{
    "someglobalthing": "Hello world!",
    "items": [
        { "name": "paper", "price": "5" },
        { "name": "bear repellent", "price": "10" }
    ]
}

を参照するコードjson.itemsはまったく変更する必要はありません。

最上位の JSON 配列には、セキュリティ上の問題が発生する可能性もあります。最新のブラウザでは修正されていると思いますが、とにかくトップレベル オブジェクトの方が汎用性があります。

于 2013-06-19T17:17:01.853 に答える
0

次の形式でjsファイルを作成するだけです

var tempData = [
   {name : "paper", price : 5},
   {name : "bear repellent", price : 10},
];

<script>タグを使用してこのファイルをページに追加します

次にtempData、関数呼び出しでオブジェクトをデータとして使用します

于 2013-06-19T16:44:59.730 に答える