質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1082閲覧

jqueryでjson出力

hiroshi3324

総合スコア14

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

3クリップ

投稿2018/04/30 06:06

インスタグラムみたいに画像を並べてそれをリンクつきにするというサイトをjsonで管理できるようにして作成しているのですがリンク先も同じ形式のサイトを想像しているのでそれもjsonで管理したいと思いできるようにしたいのですがどうすればいいかわかりせん。このようなjsonの形式でトップページにtitleが入り押すとそれぞれのリンクを作成してそのリンクに繋がりそれぞれの内容に入れ替わるようにしたいです。よ内容というのがdateからしたに入っている内容を出力したいです。簡単に言いますと一つのjsonでトップページの内容から次のリンクの内容までを出力できるようにしたいです。現在jsは枠だけは作れたのですがリンク別に作成するところで止まっている状態です。

json

1[ 2 3 { 4 "titile1": 5 { 6 "date":"20xx-x", 7 "description":"説明が入ります", 8 "img":"./imgs/IMG1.jpg", 9          "subimg": "./imgs/IMG5.jpg" 10 } 11 }, 12 { 13 "titile2": 14 { 15 "date":"20xx-x", 16 "description":"説明が入ります", 17 "img":"./imgs/IMG2jpg", 18          "subimg": "./imgs/IMG5.jpg" 19 } 20 }, 21 { 22 "titile3": 23 { 24 "date":"20xx-x", 25 "description":"説明が入ります", 26 "img":"./imgs/IMG3.jpg", 27          "subimg": "./imgs/IMG5.jpg" 28 } 29 }, 30 { 31 "titile4": 32 { 33  "date":"20xx-x", 34 "description":"説明が入ります", 35 "img":"./imgs/IMG4.jpg", 36          "subimg": "./imgs/IMG5.jpg" 37 } 38 }, 39]

js

1$(function() 2{ 3 $.ajax({ 4 type: 'post', 5 url: 'json/contents.json', 6 async: true, 7 cache: false, 8 dataType: 'json', 9 scriptCharaset: 'utf-8', 10 success: function(data) 11 { 12 for(var i=0;i<data.length;i++) 13 { 14 var imgDiv = $('<a></a>').attr('href', data[i]["path"]); 15 var img = $('<div>').attr({'class':'col-md-4 imgCol'}); 16 img.append($('<div class="imgContainer"></div>') 17 .append($('<img>').attr({"src":data[i]["img"],"width":"100%","height":"350px"})) 18 .append($('<div class="imgCover"><div class="coverTitle">'+data[i]["title"]+'</div></div>'))); 19 20 img.appendTo(imgDiv); 21 imgDiv.appendTo($('#jsonData')); 22 } 23 }, 24 }) 25}); 26
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ポートフォリオサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="./css/jquery-ui.min.css"> <link rel="stylesheet" href="./css/style.css"> <!-- Meta --> <meta name="description" content="ポートフォリオサイトです。"> <meta name="keywords" content="キーワード"> <meta name="language" content="ja"> <!-- Favicon --> <link rel="shortcut icon" href="http://example.com/imgs/favicon.ico"> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> </head> <body> <div class="main"> <div class="container"> <div class="row" id="jsonData"> <!--ここにインスタグラムみたいに画像が並んでそれをそれぞれリンク別に出力したいです--> </div> </div> </div> <script src="jquery-2.1.3.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="main.js"></script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

karamarimo

2018/04/30 06:23

「それぞれのリンクを作成してそのリンクに繋がりそれぞれの内容に入れ替わるようにしたいです」とありますが、それぞれのリンクとは何でしょうか?JSONの中に見当たりません。また入れ替わるというのは何が何に置き換わるのでしょうか?
hiroshi3324

2018/04/30 11:52

説明が足りませんでした。titleというところはトップページに表示したくてそれぞれのtitleに押された内容を次のページで表示したいという感じです。titleの中のdateやimgの形式は同じなのでjsonで管理してそれぞれの次のページを生成できたらと思ったので、、、やり方が違うかもしれませんが別のやり方があるなら教えてください。
karamarimo

2018/04/30 14:51

トップページにtitleのみの一覧が表示されていて、titleをクリックするとtitle一覧は消えて、クリックした title に対応する date や img が表示されるということでしょうか?
karamarimo

2018/04/30 15:00

質問文のコードはトップページに title と img を一覧で表示しようとしている、ということでよろしいでしょうか?また、data[i]["path"] とありますがJSONに "path" が存在しません。
hiroshi3324

2018/04/30 15:14

karamarimoさんの言う通りでトップページにtitleとimgを一覧で表示させてその画像をクリックするとそれぞれのリンクを生成して表示させるということです。最初トップページにtitleと画像とパスを設定していてhtmlのファイルを別に用意していたのですがjsonで表示したほうが管理しやすいと思ったのですがどういう構成にしたらいいかわからない感じです。なのでpathは無視してかまいません。消し忘れていました。
karamarimo

2018/04/30 15:27

元々は別々のhtmlページだったんですね。その挙動を維持するには、プラウザの戻るボタンでページを戻れるようにする必要がありますが、どうでしょうか?そうなるとSPA(single page application)を作ることになりますね。react+react-router とか vue+vue-routerを使うと楽ですが、もちろんjQueryだけでもできます。
hiroshi3324

2018/05/01 00:18

はい、もともと別々のhtmlページでした。SPAというものはどういうものなのでしょうか?無知ですいません。もし実装するのであればjqueryで実装する方法を検討したいのでご教授もいただけると嬉しいです。
karamarimo

2018/05/01 01:11 編集

SPAがどういうものかというのはご自分で調べていただくのがいいと思いますが、簡単に言うと単一のページ上で、javascriptでページの内容を更新するというものです。
guest

回答1

0

ブラウザーの戻る/進むボタンでページ遷移できるようにするにはHistory APIを使用する必要があります。urlとページの対応付けも含めてこれを(client-side) routingといいます。

専用のライブラリなしでroutingをするのは面倒なのでライブラリPage.jsを使った例を示します。

JSFiddle Demo
(Back/Forwardボタンはブラウザの戻る/進むボタンの代わりです)

html

1<button id="btn-back">Back</button> 2<button id="btn-forward">Forward</button> 3<div id="app"> 4</div>

js

1$(() => { 2 const users = [{ 3 name: "Alice", 4 age: 24 5 }, 6 { 7 name: "Bob", 8 age: 90 9 } 10 ] 11 const $app = $("#app") 12 13 page("*", (context, next) => { 14 $app.empty() 15 next() 16 }) 17 page("/", context => { 18 for (const user of users) { 19 const userLink = 20 $(document.createElement("a")) 21 .text(user.name) 22 .attr("href", "#") 23 .click(e => { 24 page(`/users/${user.name}`) 25 e.preventDefault() 26 }) 27 $app.append(userLink) 28 } 29 }) 30 page("/users/:name", context => { 31 const user = users.find(u => u.name === context.params.name) 32 if (user) { 33 $app.text(`name: ${user.name}, age: ${user.age}`) 34 } 35 }) 36 // initialize 37 page() 38 // starting page 39 page("/") 40}) 41 42$("#btn-back").click(e => { 43 history.back() 44}) 45$("#btn-forward").click(e => { 46 history.forward() 47})

補足

質問文のJSONは

json

1[ 2 3 { 4 "titile1": 5 { 6 "date":"20xx-x", 7 "description":"説明が入ります", 8 "img":"./imgs/IMG1.jpg", 9          "subimg": "./imgs/IMG5.jpg" 10 } 11 }, 12 ... 13]

となっていますが、dateなどのプロパティが取り出しにくいので↓のようにしたほうがいいと思います。

json

1[ 2 3 { 4 "title": "titile1", 5 "date":"20xx-x", 6 "description":"説明が入ります", 7 "img":"./imgs/IMG1.jpg", 8 "subimg": "./imgs/IMG5.jpg" 9 }, 10 ... 11]

投稿2018/05/01 02:59

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問