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

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

ただいまの
回答率

90.62%

  • JavaScript

    15885questions

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

  • HTML

    8649questions

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

  • JSON

    1112questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 2,345

dian_kat

score 10

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

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

[
 {    "href": "/news/01.html",
      "thumb": "https://placehold.jp/510x345.png",
      "date": "2017年09月10日",
      "title": "タイトルが入ります①タイトルが入ります①タイトルが入ります①",
      "copy": "キャッチコピーが入ります①キャッチコピーが入ります①",
      "source": "出典①"
    },
    { "href": "/news/02.html",
      "thumb": "https://placehold.jp/510x345.png",
      "date": "2017年09月20日",
      "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②",
      "copy": "キャッチコピーが入ります②キャッチコピーが入ります②",
      "source": "出典②"
    },
    { "href": "/news/03.html",
      "thumb": "https://placehold.jp/510x345.png",
      "date": "2017年09月30日",
      "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②",
      "copy": "キャッチコピーが入ります③キャッチコピーが入ります③",
      "source": "出典③"
    }
]


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

<div id="headline_contents" class="headline_contents">
<ul>

<li>
<a href="/news/01.html">
<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div>
<div class="data">
<p class="date">2017年09月10日</p>
<p class="title">タイトルが入ります①タイトルが入ります①タイトルが入ります①</p>
<p class="copy">キャッチコピーが入ります①キャッチコピーが入ります①</p>
<p class="source">出典①</p>
</div>
</a>
</li>

<li>
<a href="/news/02.html" target="_blank">
<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div>
<div class="data">
<p class="date">2017年09月20日</p>
<p class="title">タイトルが入ります②タイトルが入ります②タイトルが入ります②</p>
<p class="copy">キャッチコピーが入ります②キャッチコピーが入ります②</p>
<p class="source">出典②</p>
</div>
</a>
</li>

<li>
<a href="/news/03.html">
<div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div>
<div class="data">
<p class="date">2017年09月30日</p>
<p class="title">タイトルが入ります③タイトルが入ります③タイトルが入ります③</p>
<p class="copy">キャッチコピーが入ります③キャッチコピーが入ります③</p>
<p class="source">出典③</p>
</div>
</a>
</li>

</ul>
</div>


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

$(document).ready(function () {
    $.getJSON("news.json", function(data){
        for(var i in data){
        $("#headline_contents").append("<ul>").append('<li><a href="' + data[i].href + '">')
        }
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+6

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

$(function(){
  $.getJSON("news.json", function(data){
    var src = data.map(function(i){
      return '<li>' +
        '<a href="' + i.href + '">' +
        '<div class="thumb"><span><img src="' + i.thumb + '" alt=""></span></div>' +
        '<div class="data">' +
        '<p class="date">' + i.date + '</p>' +
        '<p class="title">' + i.title + '</p>' +
        '<p class="copy">' + i.copy + '</p>' +
        '<p class="source">' + i.source + '</p>' +
        '</div>' +
        '</a>' +
        '</li>';
    })
    .join('');

    src = '<ul>' + src + '</ul>';
    $('#headline_contents').append(src);
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/20 22:10

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

    キャンセル

checkベストアンサー

+4

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

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

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

"news": [
 {    "href": "/news/01.html",
      "thumb": "https://placehold.jp/510x345.png",
      "date": "2017年09月10日",
      "title": "タイトルが入ります①タイトルが入ります①タイトルが入ります①",
      "copy": "キャッチコピーが入ります①キャッチコピーが入ります①",
      "source": "出典①"
  },
  { "href": "/news/02.html",
    "thumb": "https://placehold.jp/510x345.png",
    "date": "2017年09月20日",
    "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②",
    "copy": "キャッチコピーが入ります②キャッチコピーが入ります②",
    "source": "出典②"
  },
  { "href": "/news/03.html",
    "thumb": "https://placehold.jp/510x345.png",
    "date": "2017年09月30日",
    "title": "タイトルが入ります②タイトルが入ります②タイトルが入ります②",
    "copy": "キャッチコピーが入ります③キャッチコピーが入ります③",
    "source": "出典③"
  }
]
<ul id="headline_contents">
 <li>
  <a href="/news/01.html">
  <div class="thumb"><span><img src="https://placehold.jp/510x345.png" alt=""></span></div>
  <div class="data">
  <p class="date">2017年09月10日</p>
  <p class="title">タイトルが入ります①タイトルが入ります①タイトルが入ります①</p>
  <p class="copy">キャッチコピーが入ります①キャッチコピーが入ります①</p>
  <p class="source">出典①</p>
  </div>
  </a>
 </li>
</ul>
$(function(){
  $.ajax({
    type: "GET",
    scriptCharset: 'utf-8',
    dataType:'json', 
    url: "news.json",
    jsonpCallback: 'news',
    success: function(json){
      var len = json.length;
    for(var i=0; i < len; i++){
      $("#headline_contents").append(
        '<li><a href="' + json[i].href + 
        '"><div<div class="thumb"><span><img src="' + json[i].thumb + 
        '" alt=""></span></div><div class="data"><p class="date">' + json[i].date +
        '</p><p class="title">' + json[i].title + 
        '</p><p class="copy">' + json[i].copy + 
        '</p><p class="source">' + json[i].source + 
        '</p></div></a></li>'
      );
    }
    },
    error:function(){console.log('読み込めませんでした');}
  });
});

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/20 22:07

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

    キャンセル

+4

jQueryをご利用でしょうか?

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

$(function(){
  $.getJSON("news.json", function(data){
    $('#headline_contents').append($('<ul>'));
    data.map(function(i){
      $('#headline_contents ul:first').append($('<li>').append($('<a>').attr('href',i.href).html('test')));
    });
  });
});
<div id="headline_contents"></div>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/20 22:05

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

    キャンセル

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

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15885questions

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

  • HTML

    8649questions

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

  • JSON

    1112questions

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