如何将特定HTML文件引用到JSON文件中的特定数组

Question

我有一个JSON文件（https://github.com/conde-nast-international/cnid-tech-tests/blob/master/data/article.json），其中包含有关杂志文章（标题，正文，封面图片等）的数组数据。

我制作了一个HTML页面，其中列出了所有标题和封面图片（见下图）

我希望每篇文章在点击时重定向到我制作的另一个HTML文档（使用相同的JSON数据），该文档显示有关该文章的更多细节（见下图）

问题是，我目前所拥有的是每个单独的文章数组的index.html文件和其他几篇文章HTML文件（article-one.html，article-two.html，article-three.html等）。有没有办法可以将每篇文章JSON数组引用到相应的HTML文件中？抱歉，如果这看起来有点令人困惑，我花了好几天试图弄清楚如何做到这一点，没有运气，所以所有的建议都非常感激。谢谢。

的index.html：

<div id="header">
  <img src="images/cn-header.jpg" alt="logo" />
</div>

文章-one.html：

<div id="header">
  <img src="images/cn-header.jpg" alt="logo" />
</div>

JavaScript（对于index.html）：

$(document).ready(function() {
  $.getJSON("article.json", function(data){
    console.log(data) //just to log in console as well
    var article_data = '';
    $.each(data, function(key, value){
      article_data += '<div class="article"> <a href=" '+ /*somehow must link to other HTML pages I've created*/ +' ">';
      article_data += '<div class="title-home">' + value.title + '</div>';
      article_data += '<div class="cover-home"> <img src="' + value.cover + '"> </div>';
      article_data += '</a> </div>';
    });
    $('#container').append(article_data);
  });
});

JavaScript（适用于article-one.html）：

$(document).ready(function() {
  $.getJSON("article.json", function(data){
    console.log(data) //just to log in console as well
    var article_data = '';
    $.each(data, function(key, value){
      article_data += '<div class="a-body">';
      article_data += '<div class="page-left">';
      article_data += '<div class="page-title">' + value.title + '</div>';
      article_data += '<div class="page-cover"> <img src="' + value.cover + '"> </div>';
      article_data += '</div>';
      article_data += '<div class="page-right">';
      article_data += '<div class="page-body">';
      $.each(value.body, function (index, el) {
         if (el.type == 'plaintext') {
           article_data += '<div class="plaintext">' + el.body + '</div>';
         } else if (el.type == 'h2') {
           article_data += '<div class="h2">' + el.body + '</div>';
         } else if (el.type == 'pull_quote') {
           article_data += '<div class="pull_quote">' + el.body + '</div>';
         }
      });
      article_data += '</div>';
      article_data += '</div>';
      article_data += '</div>';
    });
    $('#container').append(article_data);
  });
});

Answer 1

我认为您可以在json对象中添加一个名为article的字段，您可以在其中保存用户点击您的卡时要打开的链接。

Javasript

var data = [
 {id: 1, article: 'article-one.html', title: 'First Lorem ipsum', image: 'path/img/1'},
 {id: 2, article: 'article-two.html', title: 'Second Lorem ipsum', image: 'path/img/2'}
];

var store= '';

$(document).ready(function(){
   data.forEach(function(item, index){
       store = store+'
          <div id="'+item.id+'"class="card">
            <a href="'+item.article+'">
               <h1>'+item.title+'</h1>
               <div class="body">
                  <img src="'item.image'">
               </div>
             </a>
          </div>
       ';
   });

   $('.cards').html(store);

});

的HTML

<div class="cards">
   <!-- your cards will be loaded here -->
</div>