Wordpress REST APIで取得した投稿日の表示変更方法

前提・実現したいこと

Wordpress REST APIを使用し、別サイトに
・アイキャッチ画像
・タイトルと記事へのリンク
・投稿日（年月日）
を最新記事3件分表示させたい。

参考記事>
https://shared-blog.kddi-web.com/webinfo/wp-rest-api/

発生している問題・エラーメッセージ

投稿日の表示が変更できなくて困っております。

現在)　2019-12-24T23:19:59

希望)　2019年12月24日

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>WP REST APIテストページ</title>
  </head>
  <body>
<div id="wordpress_blog"></div>
<!--/jQueryの読み込み-->	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
  $.ajax({
      type: 'GET',
      url: 'http://example.net/news/wp-json/wp/v2/posts?per_page=3&_embed',
	  
      dataType: 'json'
  }).done(function(json){
    var html = '';
    //記事の件数分イテレートする
    $.each(json, function( i, row ) {
 
      //ブログのタイトル
      var title = row.title.rendered;
      //ブログのURL
      var link = row.link;
      //ブログの投稿日
      var date = row.date;
      //サムネイル画像のURL
      var thumbnail
      if( row['_embedded']['wp:featuredmedia'] ) {
         thumbnail = row['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url']
      }
      html += '<article class="wp-article">';
      html += '<div class="eyecatch"><img src="' + thumbnail + '"></div>';
      html += '<h3><a href="' + link + '">' + title + '</a></h3>';
      html += '<p>' + date + '</p>';
      html += '</article>';
    });
    //整形した記事の情報をページに追加する
    $('#wordpress_blog').append(html)
  }).fail(function(json){
      console.error('WordPressのブログ記事取得に失敗しました。')
  });
});
</script>
	</body>

解決致しました

Takumiboo様よりアドバイスを頂き、投稿日の記述を変更・追記し解決致しました。
下記、修正後のscriptのみのコードです。

Takumiboo様、本当にありがとうございました！

また、勉強不足で試したコードがあっているのかわからなかった為、
試したことを未記入のまま質問してしまいました。
申し訳ございません。

次回以降気を付けさせて頂きます。

<script>
$(function(){
  $.ajax({
      type: 'GET',
      url: 'http://example.net/news/wp-json/wp/v2/posts?per_page=3&_embed',
	  
      dataType: 'json'
  }).done(function(json){
    var html = '';
    //記事の件数分イテレートする
    $.each(json, function( i, row ) {
 
      //ブログのタイトル
      var title = row.title.rendered;
      //ブログのURL
      var link = row.link;
      //ブログの投稿日
      daydata = new Date(row.date);
	  var year = daydata.getFullYear();
	  var month = daydata.getMonth();
	  var day = daydata.getDate();
	  var targetday = year + '年' + month + '月'+ day + '日'
		
		//サムネイル画像のURL
      var thumbnail
      if( row['_embedded']['wp:featuredmedia'] ) {
         thumbnail = row['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url']
      }
      html += '<article class="wp-article">';
      html += '<div class="eyecatch"><img src="' + thumbnail + '"></div>';
      html += '<h3><a href="' + link + '">' + title + '</a></h3>';
      html += '<p>' + targetday + '</p>';
      html += '</article>';
    });
    //整形した記事の情報をページに追加する
    $('#wordpress_blog').append(html)
  }).fail(function(json){
      console.error('WordPressのブログ記事取得に失敗しました。')
  });
});
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

試したことが一切書かれていませんが、何か試されたのでしょうか？

JavaScript
1date = new Date(row.date);
2var year = date.getFullYear();
3var month = date.getMonth() + 1;
4var day = date.getDate();

これで年月日が分かれて取得できるはずなので、あとはお好みに合わせて出力すれば完成ですね。

投稿2019/12/25 08:02

Takumiboo

総合スコア2534

mayumi.y

2019/12/25 10:25

Takumiboo様、お忙しい中ご回答頂きまして有難うございます！また、試したことの未記入のご指摘も有難うございます。そして申し訳ございません。次回以降、気を付けたいと思います！ご回答頂いたアドバイスを参考に、無事に出力が出来ました。 date = new Date(row.date); ですと何故か反映されなかった為、 daydata = new Date(row.date); に変更して使用させて頂きました。本当に、有難うございました。

行動規範の内容に同意します