2017-11-07 10 views
0

私は複数のWriterを持つ1つのメインJSONファイルを持っており、各番号のプロパティの1つはID番号です。JQueryで複数のJSONファイルを読む

Writer 1 
properties of Writer1 

Writer 2 
properties of Writer2 

Writer 3 
properties of Writer3 

... 

は、その後、私は(名前など、それらのID番号を持つ複数のJSONファイルを持っているので、私は作家限り多くのJSONsを持っている:私は「追加()」を使用してこのように、これらの情報を再現しているHTMLでそう

)。これらのファイルには、対応する作家の出版された書籍のリストが含まれています。

公開された本のリストを持つ各ライターのHTMLページを作成します。このような

Writer 1 (link to writer1 books) 
properties of Writer1 

Writer 2 (link to writer2 books) 
properties of Writer2 

Writer 3 (link to writer3 books) 
properties of Writer3 


----------New page for writer1----------- 
book1 
book2 
book3 
book4 
book5 

----------New page for writer2----------- 
book1 
book2 
book3 
book4 
book5 

----------New page for writer3----------- 
book1 
book2 
book3 
book4 
book5 

はそれを行うことができます任意の関数はありますか?

+0

*単一ページアプリケーション*フレームワークを使用して調べます。質問が少し曖昧です – charlietfl

+1

新しいhtmlファイルを生成したいのですか?クライアント/ブラウザベースのJSはこれを行うことができません。もしあなたがノードを使っているのであれば、私はよくわかりません。 Writer Xの詳細を記入するテンプレートを作成したい場合や、既存のページをクリアしてWriter Xの詳細のみを表示したい場合はこれが可能ですが、何を求めているのか分かりません。 –

+0

'$ .getJSON(this.id +"。js "、function(){$("#page ").html(.....)}); ' – mplungjan

答えて

1

ブラウザでjavascriptを実行していると仮定すると、新しいhtmlファイルを生成する方法はありません。これには、あなたのブラウザがあなたのコンピュータ/サーバのファイルシステムを変更する必要があります。これには、(ある例外を除いて)実行する権限がありません。

リクエストされたときに動的にページを生成したい場合(たとえば、誰かがyoursite.com/writer/1を訪問し、最初のライターについてのページを表示したい場合)、あなたは長い旅をしています。これには多くの解決策があります.single page application frameworksを調べる必要があります。これは、URLパスとデータベース(場合によってはjsonファイル)を指定して動的にページを生成するという考え方に基づいています。そこには他のフレームワークもあります.SPAは最近非常に暑く、JSのすべてを保持することができます。

フレームワークやそれに類するもの(あなたのケースでは過度のように思える)を実装せずに「ページのような」動作を実現する1つの方法は、リンクをクリックするとポップアップを表示したり、ページを再構成することです。たとえば、誰かが 'ライター1'をクリックした場合、jQuery's .hide() methodを使用して他のすべてのライターを非表示にし、余分なライターに追加情報を追加することができます。これは新しいページを作ることはできませんが、それはそれがそうであるように見えるようにすることができますmanipulating the browser's history.

+0

あなたの答えは本当に助けになりました。ありがとう – Laura

+1

@Laura私がSPAのことを学ぶ前に、私は基本的に私が作ったWordpressのテーマのために私自身のものを作りました。 Olivier.ukは、ページの読み込み中のすべてのデータの読み込みと、それを隠す/再構築することに完全に基づいています。サイトが改装される予定であるため、このリンクは最新のものではないことに注意してください。 –

関連する問題