https://yonasato.com/cms/js/user/render-article.js

1const fetchProductArticle = async(categoryURL) =>{
2  const response = await fetch(categoryURL);
3  if(response.ok){
4    const parser = new DOMParser();
5    const data = await response.text();
6    const categoryLists = await parser.parseFromString(data, "text/html");
7    return categoryLists;
8  } else{
9    console.error('error');
10  }
11}
12function is_json(data) {
13	try {
14		JSON.parse(data);
15    console.log('OK')
16	} catch (error) {
17    console.log('NG')
18		return false;
19	}
20	return true;
21}
22
23function createNoItem(area){
24  const addAttention = document.createElement('p');
25  addAttention.classList.add('no-item');
26  addAttention.textContent = '表示する記事ががありません';
27  area.before(addAttention);
28}
29
30// function createProductList(itemData,area){
31//   const listFragment = document.createElement('template');
32//   itemData.forEach(item =>{
33//     const productName = item.productname;
34//     const productImage = item.image;
35//     const productLink = item.url;
36
37//     listFragment.innerHTML += `<li><a href="${productLink}"><div class="img"><img src="${productImage}" alt="商品画像"></div><div class="txt"><h3>${productName}</h3></div></a></li>`;
38
39//   })
40
41//   area.appendChild(listFragment.content);
42// }
43
44
45function createArticleSortList(articleData,tag,area){

46  const listFragment = document.createElement('template');
47  const matchTagArticleList = [];
48  articleData.filter(article =>{
49    const getTag = article.tag;
50    if(getTag == tag){
51      matchTagArticleList.push(article);
52    }
53  })
54  matchTagArticleList.forEach(data =>{
55    const articleTitle = data.title;
56    let articleImage;
57    if(data.image00){
58      articleImage = data.image00;
59    }else{
60      articleImage = data.image;
61    }
62
63      let articleLink = data.url;
64      const articleCategory = (data.category != "") ? data.category.split(',') : '';
65      const articleCategoryAdd = (articleCategory != "") ? `<span class="category">${articleCategory[0]}</span>` : '';
66      if(articleCategory != "") articleLink = articleLink.replace('\/guide\/', `${articleCategory[1]}\/`);
67      listFragment.innerHTML += `<li><a href="${articleLink}">${articleCategoryAdd}<div class="img"><img src="${articleImage}" alt=""></div><p class="txt">${articleTitle}</p></a></li>`;
68  })
69
70  area.appendChild(listFragment.content);
71}
72
73function createArticleList(articleData,tag,area){

74  const listFragment = document.createElement('template');
75  if(articleData.length >= 4){
76    for(let i = 0; i < 4; i++){
77      let articleImage;
78      if(articleData[i].image00){
79        articleImage = articleData[i].image00;
80      }else{
81        articleImage = articleData[i].image;
82      }
83      const articleTitle = articleData[i].title;
84        let articleLink = articleData[i].url;
85        const articleCategory = (articleData[i].category != "") ? articleData[i].category.split(',') : '';
86        const articleCategoryAdd = (articleCategory != "") ? `<span class="category">${articleCategory[0]}</span>` : '';
87        if(articleCategory != "") articleLink = articleLink.replace('\/guide\/', `${articleCategory[1]}\/`);
88        listFragment.innerHTML += `<li><a href="${articleLink}">${articleCategoryAdd}<div class="img"><img src="${articleImage}" alt=""></div><p class="txt">${articleTitle}</p></a></li>`;
89    }
90  }else{
91     articleData.forEach((data,i) =>{
92    const articleTitle = data.title;
93      let articleImage;
94      if(articleData[i].image00){
95        articleImage = articleData[i].image00;
96      }else{
97        articleImage = articleData[i].image;
98      }
99      let articleLink = data.url;
100      const articleCategory = (data.category != "") ? data.category.split(',') : '';
101      const articleCategoryAdd = (articleCategory != "") ? `<span class="category">${articleCategory[0]}</span>` : '';
102      if(articleCategory != "") articleLink = articleLink.replace('\/guide\/', `${articleCategory[1]}\/`);
103      listFragment.innerHTML += `<li><a href="${articleLink}">${articleCategoryAdd}<div class="img"><img src="${articleImage}" alt=""></div><p class="txt">${articleTitle}</p></a></li>`;
104  })
105  }
106
107
108
109  area.appendChild(listFragment.content);
110
111}
112
113async function renderArticle(area,tag,url){
114  const result = await fetchProductArticle(url);
115  const targetJsonData = result.getElementById('articleJson')
116  if(targetJsonData){
117    const jsonData = targetJsonData.textContent.replace(/\s+/g, "");
118    const productJson = JSON.parse(jsonData.replace('},]', '}]'));
119    createArticleSortList(productJson,tag,area)
120  }else{
121    createNoItem(area)
122  }
123}
124
125async function renderTagArticle(area,tag,url){
126  const result = await fetchProductArticle(url);
127  const targetJsonData = result.getElementById('articleJson')
128  if(targetJsonData){
129    const jsonData = targetJsonData.textContent.replace(/\s+/g, "");
130    const productJson = JSON.parse(jsonData.replace('},]', '}]'));
131    createArticleList(productJson,tag,area)
132  }else{
133    createNoItem(area)
134  }
135}
136
137
138window.addEventListener('load',()=>{
139  const articleJsonDomain = '/ajax/article/json/tag/';
140  const getrelatedArticle = document.querySelector('#related_article');
141  if(getrelatedArticle){
142    const relatedArticle01 = getrelatedArticle.querySelector('.related_article01');
143    const relatedArticle01AddArea = relatedArticle01.querySelector('.js-article-category');
144    const relatedArticle01Tag = relatedArticle01.querySelector('.js-article-category').dataset.articleTag;
145    const articleJsonUrl01 = articleJsonDomain + relatedArticle01Tag;
146    renderTagArticle(relatedArticle01AddArea,relatedArticle01Tag,articleJsonUrl01)
147
148    const relatedArticle02 = getrelatedArticle.querySelector('.related_article02');
149    const relatedArticle02AddArea = relatedArticle02.querySelector('.js-article-category');
150    const relatedArticle02Tag = relatedArticle02.querySelector('.js-article-category').dataset.articleTag;
151    const articleJsonUrl02 = articleJsonDomain + relatedArticle02Tag;
152    renderTagArticle(relatedArticle02AddArea,relatedArticle02Tag,articleJsonUrl02)
153  }
154})