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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3159閲覧

JSONファイルからHTML生成したい

dian_kat

総合スコア16

JSON

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

3クリップ

投稿2017/09/19 11:56

編集2017/09/19 12:06

newsサイトを作っています。
記事の更新しやすさを考慮して、外部のjsonファイルでデータを管理したいです。

下記のJSONファイルを用意しましたが、
javascript/jqueryを使い、どのようにしてHTMLを生成するかが分かりません。

JSON

1[ 2 { "href": "/news/01.html", 3 "thumb": "https://placehold.jp/510x345.png", 4 "date": "2017年09月10日", 5 "title": "タイトルが入ります①タイトルが入ります①タイトルが入ります①", 6 "copy": "キャッチコピーが入ります①キャッチコピーが入ります①", 7 "source": "出典①" 8 }, 9 { "href": "/news/02.html", 10 "thumb": "https://placehold.jp/510x345.png", 11 "date": "2017年09月20日", 12 "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②", 13 "copy": "キャッチコピーが入ります②キャッチコピーが入ります②", 14 "source": "出典②" 15 }, 16 { "href": "/news/03.html", 17 "thumb": "https://placehold.jp/510x345.png", 18 "date": "2017年09月30日", 19 "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②", 20 "copy": "キャッチコピーが入ります③キャッチコピーが入ります③", 21 "source": "出典③" 22 } 23]

下記のようにHTMLを生成したいです。

HTML

1<div id="headline_contents" class="headline_contents"> 2<ul> 3 4<li> 5<a href="/news/01.html"> 6<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div> 7<div class="data"> 8<p class="date">2017年09月10日</p> 9<p class="title">タイトルが入ります①タイトルが入ります①タイトルが入ります①</p> 10<p class="copy">キャッチコピーが入ります①キャッチコピーが入ります①</p> 11<p class="source">出典①</p> 12</div> 13</a> 14</li> 15 16<li> 17<a href="/news/02.html" target="_blank"> 18<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div> 19<div class="data"> 20<p class="date">2017年09月20日</p> 21<p class="title">タイトルが入ります②タイトルが入ります②タイトルが入ります②</p> 22<p class="copy">キャッチコピーが入ります②キャッチコピーが入ります②</p> 23<p class="source">出典②</p> 24</div> 25</a> 26</li> 27 28<li> 29<a href="/news/03.html"> 30<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div> 31<div class="data"> 32<p class="date">2017年09月30日</p> 33<p class="title">タイトルが入ります③タイトルが入ります③タイトルが入ります③</p> 34<p class="copy">キャッチコピーが入ります③キャッチコピーが入ります③</p> 35<p class="source">出典③</p> 36</div> 37</a> 38</li> 39 40</ul> 41</div>

下記のjsを書いて<a>タグのリンクのみ取得できないかテストで試しておりますが、
jsonからデータを取得できず、特にエラーも出ず、対処法がわからず困っております。
解決方法をご教授いただければと思います。
よろしくお願いいたします。

js

1$(document).ready(function () { 2 $.getJSON("news.json", function(data){ 3 for(var i in data){ 4 $("#headline_contents").append("<ul>").append('<li><a href="' + data[i].href + '">') 5 } 6 }); 7});

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

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

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

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

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

guest

回答3

0

yambejpさんのコードの改変となりますが、
appendなどのDOM操作は比較的重い処理となるので(とはいえ、人間が気づくレベルではないですが)、
HTMLを文字列として生成しておき、最後の最後に一括でappendするという形にした方がベターです。

javascript

1$(function(){ 2 $.getJSON("news.json", function(data){ 3 var src = data.map(function(i){ 4 return '<li>' + 5 '<a href="' + i.href + '">' + 6 '<div class="thumb"><span><img src="' + i.thumb + '" alt=""></span></div>' + 7 '<div class="data">' + 8 '<p class="date">' + i.date + '</p>' + 9 '<p class="title">' + i.title + '</p>' + 10 '<p class="copy">' + i.copy + '</p>' + 11 '<p class="source">' + i.source + '</p>' + 12 '</div>' + 13 '</a>' + 14 '</li>'; 15 }) 16 .join(''); 17 18 src = '<ul>' + src + '</ul>'; 19 $('#headline_contents').append(src); 20 }); 21});

投稿2017/09/19 14:26

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

dian_kat

2017/09/20 13:10

お返事遅くなりました。 ご回答ありがとうございます。 appendはDOM操作に影響を与えることは知らなかったので、 今回は一括でappendするようコード改変してみました。 とても参考になりました、
guest

0

ベストアンサー

私も似たような事を最近しました(渡しの場合はXMLでしたが^^;)ので、分かる範囲でアドバイスをさせてもらいますね。
読み込んだデータを表示するのは、<ul>内になるので、JavaScript内で指定しているIDの#headline_contentsは<ul>につけて上げたほうがいいと思います。

サンプル用のコードだからなのか、JSON、HTML、JavaScriptそれぞれ修正が必要だと思います。

実際に検証したわけではないのですが、以下の様なコードでイケルと思います。

JSON

1"news": [ 2 { "href": "/news/01.html", 3 "thumb": "https://placehold.jp/510x345.png", 4 "date": "2017年09月10日", 5 "title": "タイトルが入ります①タイトルが入ります①タイトルが入ります①", 6 "copy": "キャッチコピーが入ります①キャッチコピーが入ります①", 7 "source": "出典①" 8 }, 9 { "href": "/news/02.html", 10 "thumb": "https://placehold.jp/510x345.png", 11 "date": "2017年09月20日", 12 "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②", 13 "copy": "キャッチコピーが入ります②キャッチコピーが入ります②", 14 "source": "出典②" 15 }, 16 { "href": "/news/03.html", 17 "thumb": "https://placehold.jp/510x345.png", 18 "date": "2017年09月30日", 19 "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②", 20 "copy": "キャッチコピーが入ります③キャッチコピーが入ります③", 21 "source": "出典③" 22 } 23]

HTML

1<ul id="headline_contents"> 2 <li> 3 <a href="/news/01.html"> 4 <div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div> 5 <div class="data"> 6 <p class="date">2017年09月10日</p> 7 <p class="title">タイトルが入ります①タイトルが入ります①タイトルが入ります①</p> 8 <p class="copy">キャッチコピーが入ります①キャッチコピーが入ります①</p> 9 <p class="source">出典①</p> 10 </div> 11 </a> 12 </li> 13</ul>

JavaScript

1$(function(){ 2 $.ajax({ 3 type: "GET", 4 scriptCharset: 'utf-8', 5 dataType:'json', 6 url: "news.json", 7 jsonpCallback: 'news', 8 success: function(json){ 9 var len = json.length; 10 for(var i=0; i < len; i++){ 11 $("#headline_contents").append( 12 '<li><a href="' + json[i].href + 13 '"><div<div class="thumb"><span><img src="' + json[i].thumb + 14 '" alt=""></span></div><div class="data"><p class="date">' + json[i].date + 15 '</p><p class="title">' + json[i].title + 16 '</p><p class="copy">' + json[i].copy + 17 '</p><p class="source">' + json[i].source + 18 '</p></div></a></li>' 19 ); 20 } 21 }, 22 error:function(){console.log('読み込めませんでした');} 23 }); 24});

参考
https://iwb.jp/jquery-ajax-jsonp/

投稿2017/09/19 14:08

8yazaki

総合スコア454

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

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

dian_kat

2017/09/20 13:07

お返事遅くなりました。 とてもわかりやすい説明ありがとうございます。 その後色々調べて見て、 ajaxを使って実装を考えていたので非常に参考になりました。
guest

0

jQueryをご利用でしょうか?

であれば、順番に冗長な処理を書いていくだけですよね
dataはまずは配列なのでfor inではなくmapなどで回すとよいでしょう
headline_contentsが空のdivであれば、ループの外側でulをつくって
あとはli以降はループの中でやります

javascript

1$(function(){ 2 $.getJSON("news.json", function(data){ 3 $('#headline_contents').append($('<ul>')); 4 data.map(function(i){ 5 $('#headline_contents ul:first').append($('<li>').append($('<a>').attr('href',i.href).html('test'))); 6 }); 7 }); 8});

HTML

1<div id="headline_contents"></div>

※aタグのhtml処理でとめていますが、ここにどんどんappendしていけばいいと思います。
ただaタグの中にpやらdivやら詰め込むのはいい運用なのかどうかは若干疑問が残ります

投稿2017/09/19 13:58

yambejp

総合スコア114572

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

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

dian_kat

2017/09/20 13:05

お返事遅くなりました。 ご回答ありがとうございます。 mapは使った事がないので、これを機にぜひ参考にさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問