0

JSON形式の辞書のリストを解析しようとしているので、それらのデータを使用してリスト項目のセットを作成できます。このデータを使用してテキストとIDが生成されます。私は自分のウェブページに以下を渡し、それを提供する前に非表示の div に隠しています:

   [{'text': 'org1', 'id': 'org1ID'}, 
    {'text': 'org2', 'id': 'org2ID'}, 
    {'text': 'org3', 'id': 'org3ID'}]

ajaxを使用してルックアップを実行することでクライアントにデータを追加でき、同じUI要素がサブスクリプションベースのオブザーバーオブザーバブルモデルを使用してさまざまなデータセットを表示できるため、このようにしています。

Firebug は、次のように正常にレンダリングされたことを示しています。

<div id="selection">[{'text': 'org1', 'id': 'org1ID'}, 
                     {'text': 'org2', 'id': 'org2ID'}, 
                     {'text': 'org3', 'id': 'org3ID'}]</div>

この div の内容に対して JSON.parse() を実行すると、問題が発生します。次のメッセージが返されます。

JSON.parse: expected property name or '}'

JSON.parse() を削除すると、li 要素のリストが取得されますが、未定義の値があり、それらの数も予想と一致しません。

<li id="Undefined">Undefined</> <!-- Repeated a number of times equal to char lengh of div html -->

上記がまだあなたに伝えていない場合は、リストを繰り返し処理し、各辞書から情報を抽出しようとしていることに注意してください。

データを解析する前に JSON.stringify() も試しましたが、データを文字列に変換するだけのようです。ステップスルーすると次のようになります。

"[{'text': 'org1', 'id': 'org1ID'}, {'text': 'org2', 'id': 'org2ID'}, {'text': 'org3', 'id': 'org3ID'}]" <!-- The difference is that double qoutes have been injected. -->

さらに厄介なことに、少なくとも私にとっては、このデータの連想配列部分を (Javascript が認識するように) 実際にハードコーディングすると、正しく動作します。ただし、これを行うには、現在の設計の柔軟性の多くを妥協する必要があります。クライアント側の処理が増えることを除けば、最も顕著な欠点は、データ構造をサーバーから戻すことができないことです。

誰かが洞察を提供してくれますか、それとも私が見落としているかもしれない解決策を提供してくれますか? これは、js で JSON を操作する際の一般的な落とし穴ですか?

アップデート

ハード コーディングの動作が異なる理由は、python または Jinja2 がデータ構造を二重引用符ではなく単一引用符を使用するように変換しているためであることがわかりましたが、クライアントにそれを入力すると python がバイパスされます。この時点で、日食をステップスルーすると、一重引用符で囲まれた辞書のリストが表示されるので、それはpythonだと思います。

4

1 に答える 1

3

有効な JSON 文字列は、JavaScript 配列/オブジェクトを直接表し、解析はまったく必要ありません。これを script タグ内の javascript 変数に直接出力するだけです。

<script>
var json_array = [{'text': 'org1', 'id': 'org1ID'}, 
    {'text': 'org2', 'id': 'org2ID'}, 
    {'text': 'org3', 'id': 'org3ID'}];
</script>

データは自動的に JavaScript 配列に格納されるため、解析する必要はありません。

于 2013-08-01T16:56:50.417 に答える