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});
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/20 13:10