https://nttdocomo-group.com/tsunagu_story/js/output_articles.js

1function init_articles(){
2    const json = "/tsunagu_story/json/articles.json";
3    const articles = document.querySelector('.js-output-articles');
4    let count = 0;
5    $.getJSON(json, function(data,status){
6        for(var n in data) {
7            let url = location.pathname.replace('index.html', '');
8            if (url === data[n].url) continue;
9
10            let tunagu = data[n].tag_tsunagu ? `<div class="storyModule-articles-article-tags-tunagu"><span>#つなぎきる</span></div>` : '';
11            let others = data[n].tag_keyword ? `<div class="storyModule-articles-article-tags-others">${data[n].tag_keyword.map(tag => `<span>#${tag}</span>`).join('')}をつなぐ</div>` : '';
12
13            // data[n].dateが2週間以内ならNEWバッジを表示
14            let today = new Date();
15            let latest = new Date(today);
16            let latestMonth = 1; // 1ヶ月以内
17            latest.setMonth(today.getMonth() - latestMonth);
18            let newbadge = data[n].date >= latest.toISOString().split("T")[0] ? `<div class="storyModule-articles-article-new">NEW</div>` : '';
19            let article = `<article class="storyModule-articles-article">
20                    <a href="${data[n].url}" onclick="dataLayer.push({'event': 'sendEvent','eventCategory': 'BRAND_to_article','eventAction': 'click', 'eventLabel': '${data[n].eventLabel}'});">
21                        ${newbadge}
22                        <div class="storyModule-articles-article-main">
23                            <div class="storyModule-articles-article-main-img">
24                                <img src="${data[n].img}" alt="">
25                            </div>
26                            <div class="storyModule-articles-article-main-text">
27                                <p class="storyModule-articles-article-main-text-date"><time datetime="${data[n].date}">${data[n].date.replace(/-/g, ".")}</time></p>
28                                <p class="storyModule-articles-article-main-text-title">${data[n].title}</p>
29                            </div>
30                        </div>
31                        <div class="storyModule-articles-article-tags">
32                            ${tunagu}
33                            ${others}
34                            <div class="storyModule-articles-article-tags-corp"><span>#${data[n].tag_corp}</span></div>
35                        </div>
36                    </a>
37                </article>`;
38            articles.insertAdjacentHTML('beforeend', article);
39            
40            count++;
41            if(count > 3) break;
42        };
43    });
44};
45document.addEventListener('DOMContentLoaded', init_articles);