2012-02-25 16 views
0

私は助けが必要です。AJAXリクエストからオブジェクトを返す関数を作成したいので、サーバのデータから新しいオブジェクトを作成することができます:サーバから返されたJSONデータからJavaScriptオブジェクトを作成する方法

var foo = bar('api.php?x=y'); 

この関数は、クエリ文字列を引数として取る必要があり、サーバーはJSONとしてデータを返します。

jQueryを使用してこれを行う方法を教えてもらえますか?アイデアや例はありますか?

私はそれがすべて間違っているように見えるので、私は私の質問で展開します。ライブデータ(株価)のに基づいてWebアプリケーションを作成しようとしているため、サーバーから更新情報を常に要求しなければなりません。アプリケーションが初期化されると、最初のステップでは、ティッカーシンボルや発行者などの株式から静的データが取得されます。これを行う最善の方法はサーバー上のデータベースと、クエリを実行し、選択した株価データをJSONとして返します。次のステップは、選択された株のライブデータ(価格や量など)を返すサーバー上の別のAPIにリクエストを行い、完全なデータが返されたときにテンプレートエンジンを使用してhtmlにレンダリングされます。その後、アプリはライブデータを更新して再度レンダリングするために、一定間隔で2番目のAPIを常に呼び出さなければなりません。また、株式の新しい選択をし、プロセスを再開することができるはずです。

私はこのようなアプリを構造化する最良の方法は、データを後で(ソートやフィルタリングなど)独自のメソッドを持つカスタムオブジェクトに入れることだと思うので、fooは私のオブジェクトです株データ私はfoo.sort()、またはfoo.render()のような何かをして、データのhtml表現を作成することができます。そのため、私はAJAX呼び出しから返されたデータからオブジェクトを作成するのが最善の方法だと考えました。 これがこのようなアプリを構成する正しい方法であるか、正しい方向に向いているか教えてください。 JSON文字列は、サーバーがで応答するものである場合

おかげ

+2

jQueryドコのこのページには、例があります:http://api.jquery.com/jQuery.getJSON/ - 詳細については、他のjQuery Ajax関数を参照してください。データを取得する関数を呼び出すという考えは、非同期のAjax呼び出しではうまく機能しませんが、回避することができます。 – nnnnnn

+3

これはあなたの以前の質問とよく似ています(http://stackoverflow.com/questions/9271573/creating-custom-javascript-object-from-data-returned-by-jquery-ajax-request) –

答えて

5

が、それだけでJS-オブジェクトにそれを変換するために簡単です...

var resp_object = JSON.parse(response); 
+4

あなたは、 jQuery AjaxメソッドがJSONを自動的に解析するため、jQueryが(質問のタグごとに)使用されていると仮定すると、それを行う必要もありません。 – nnnnnn

6

AJAXを定義することにより、非同期なので、それはdoesnの特にあなたの質問に合っていない。私の代わりにコールバックをjQuery.ajax(see reference)を使用することをお勧めします:

$.ajax({ 
    url: 'api.php?x=y', 
    dataType: 'json', 
    success: function (foo) { 
    // Do stuff here using 'foo' 
    } 
}); 
+1

詳細については、APIリファレンスを参照してください。http://api.jquery.com/jQuery.ajax/ – JulioC

+0

@JulioC追加、ありがとう。 –

+1

* AJAXは定義上非同期です*。違います。それは同期的に実行できます。だからAJAXはそのような悪い頭字語です。 XHR(XmlHTTPRequest)はより良い頭字語です。また、https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest – KooiInc

4

あなたはあなたのアプローチで同期を考えています。

これは、関数呼び出し "bar( 'api.php?x = y')は、取得したデータ/オブジェクトをすぐに返す必要があると考えることを意味します。これは、答えを待つ間、ブラウザでのコード実行がブロックされるという欠点があります。 user595228は前に指摘したように

これを克服するために、あなたは、非同期コールバックハンドラ(「成功」ハンドラ"jQuery.ajax"での作業)を作成する必要があります。返された情報をレンダリングするコードは、このハンドラに入ります。

コードをどのように構造化するかは、取得するデータの複雑さとアプリケーションでの使用頻度によって決まります。その複合体が複数の場所で使用される場合、ヘルパー関数を使用してデータオブジェクトを作成し、コードの重複を避け、データに関するコードを1か所に配置することが理にかなっています。あなたがそれらを1つの場所でレンダリングするだけで、あなたが行う唯一のことは単純な並べ替えと表示です。複雑さを軽減するために、そのロジックを単純な関数に置くことにします。

0

Jqueryプラグインを作成し、オブジェクトをフックすることができます。例:

var foo = tablesort({}); // tablesort is plugin Jquery 
foo.sort(); 

あなたは、それが意味するjQueryプラグインでのsortメソッドを実装する必要があります。何か

0

は、ライブデータがあなたに押されているサーバーからAJAXを使用してデータを取得し、オブジェクトの属性を埋めるかのですか?それは私があなたがそれを見逃しているワイヤー上にデータが出て行く瞬間に何か聞いていない場合、私はそれを意味するのですか?それとも、それをポーリングして取得するのを待っているのですか?

最初の状況がある場合は、サーバーに在庫サービスのデータを取得させてキューに入れるか、複数のユーザーのキューをどのように処理するかが問題になります。または、WebSocket(HTML5はすべてのブラウザでサポートされていません)を設定するか、彗星の解決策(フラッシュオブジェクトまたは高速ポーリングを含む可能性があります)を見てください。

状況番号が2の場合、Ajaxを使用してタイマーで使用可能なデータ・ブロックを取得できます。非同期のajaxを使用する必要があります。そうしないと、画面が応答待ちになることがあります。 jqueryのようなものを使ってそのプロセスを手伝ってください。ホイールを再構築する必要はありません。

0

私は通常、データの提示をデータ自体とは別に保つことを好みます。オブジェクトをサーバーから受け取った後にオブジェクトに関数を追加するのではなく、データオブジェクトを渡すことをお勧めします。

例:

function renderStockData(data) { 
    // build and return HTML from data 
} 

function loadStockData(url, callback) { 
    $.ajax({ 
    url: url, 
    dataType: 'json', 
    success: callback 
    }); 
} 

// Later that day... 
loadStockData('api?stock=GOOG', function (data) { 
    var renderedHtml = renderStockData(data); 
    // ... 
}); 

これはあなたが探しているアドバイスの種類ですか?

関連する問題