javascript - 如何使用 javascript 或 jQuery 引用 csv 或 json 文件中的项目动态地将项目和属性添加到 HTML

Question

我正在尝试使以下代码更易于维护。我不是网络开发人员，所以请耐心等待。我认为以下做法是合适的。

我想使用 javascript 或 jQuery 动态地将内容和属性添加到 html 文件中。这些项目可以驻留在 .csv 中。或.json (或其他什么？)文件。

<小时/>

给定这样的内容

<div class="filtr-container">

    <div class="col-12 col-sm-6 col-md-4 card filtr-item" data-category="cat-1" data-date="2018-02-09">
        <div class="card-inner-border box-shadow">
            <a href="address-1.html">
                <img class="card-img-top rounded-top" src="./images/image-1.jpg" alt="img-2-alt">
            </a>
            <div class="card-body">
                <h5 class="card-title">Title-1</h5>
                <p class="card-text card-desc">
                    This is a description for title-1 content.
                </p>
                <a href="address-1.html">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                </a>
                <p class="card-text">
                    <small class="text-muted">Last updated February 2, 2018</small>
                </p>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4 card filtr-item" data-category="cat-2, cat-3" data-date="2018-02-14">
        <div class="card-inner-border box-shadow">
            <a href="address-2.html">
                <img class="card-img-top rounded-top" src="./images/image-2.jpg" alt="img-2-alt">
            </a>
            <div class="card-body">
                <h5 class="card-title">Title-2</h5>
                <p class="card-text card-desc">
                    Here is a long description for title-2 content.
                </p>
                <a href="address-2.html">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                </a>
                <p class="card-text">
                    <small class="text-muted">Last updated February 14, 2018</small>
                </p>
            </div>
        </div>
    </div>

    <!-- MANY MORE CARDS / ITEMS ... -->

</div> <!-- End of filtr-container -->

我认为我们可以将细节抽象成这样的东西(.csv)

item-id,title,description,categories,address,image,image-alt,update
1,Title-1,This is a description for title-1 content.,cat-1,address-1.html,image-1.jpg,img-1-alt,2018-02-09
2,Title-2,Here is a long description for title-2 content.,"cat-2, cat-2",address-2.html,image-2.jpg,img-2-alt,2018-02-14

<小时/>

使用“javascript”或“jQuery”从“.csv”或“.json”文件添加此内容的好方法是什么？

一些问题:

• .csv 的 header 不会逐字匹配(例如 <p class="card-desc"> 与 .csv 的 description header 对齐)
• 可能会嵌入逗号分隔的项目(例如，项目 2 有类别 cat-2, cat-3，因此它会在 " 中得到引号 .csv ——也许 .json 会更好(？)，或者可能不是问题)
• 如果可能的话，我们可以重复使用 date两者的项目 data-date=最后一段文字<small class="text-muted">它将日期转换为 Last updated month-name-long, dd, yyyy而不是yyyy-mm-dd .
• 某些属性是部分引用(例如，图像的 src 只是路径的最后部分；在 image-1.jpg 中表示为 .csv 而不是 ./images/image-jpg )。

<小时/>

为了让这件事感觉不那么复杂，这里有一张图片，其中突出显示的元素可以从.csv中“引用”。文件。

对我来说，这感觉就像:

1. 读入 .csv 文件。
2. 对于 .csv 文件中的每个项目，将对象附加到 $(".filtr-container")与 shell 布局...

但是当涉及到细节或者这是否是适当的方法时，我迷失了方向。

Answer 1

您似乎正在搜索模板解析。您可以找到许多可以减轻这种负担的库。以最简单的形式，模板解析执行以下代码中的步骤。如果您不需要模板解析器库或完整框架的灵 active 、功能、功能等，并且您想要完成的只是下面所示的内容，则应该考虑不包含数千行代码。

既然您提到了 JSON 和 CSV，我就包含了解析这两者的代码。我将把 AJAX 和日期格式化魔法留给您。我认为我也没有填充 ID，但这表明比模板属性更多的数据就可以正常工作。

let template = document.getElementById('card-template').innerHTML;
let container = document.querySelector('.filtr-container');

// Do some ajax magic to get csv file
let csv = `item-id,title,description,categories,address,image,image-alt,update
1,Title-1,This is a description for title-1 content.,cat-1,address-1.html,https://via.placeholder.com/75,img-1-alt,2018-02-09
2,Title-2,Here is a long description for title-2 content.,cat-2 cat-2,address-2.html,https://via.placeholder.com/75,img-2-alt,2018-02-14`;

let csvLines = csv.split("\n");
let csvHeaders = csvLines.shift().split(',');
csvLines.forEach(line => {
  let parsed = template;
  let props = line.split(',');
  props.forEach((prop, idx) => {
    parsed = parsed.replace('{{' + csvHeaders[idx] + '}}', props[idx]);
  });
  container.innerHTML = container.innerHTML + parsed;
});

let json = `[{
  "item-id": "1",
  "title": "Title-1",
  "description": "This is a description for title-1 content.",
  "categories": "cat-1",
  "address": "address-1.html",
  "image": "https://via.placeholder.com/75",
  "image-alt": "img-1-alt",
  "update": "2018-02-09"
}, {
  "item-id": "2",
  "title": "Title-2",
  "description": "Here is a long description for title-2 content.",
  "categories": "cat-2 cat-2",
  "address": "address-2.html",
  "image": "https://via.placeholder.com/75",
  "image-alt": "img-2-alt",
  "update": "2018-02-14"
}]`;

let data = JSON.parse(json);
data.forEach(col => {
  let jParsed = template;
  for (prop in col) {
    jParsed = jParsed.replace('{{' + prop + '}}', col[prop]);
  }
  container.innerHTML = container.innerHTML + jParsed;
});

<div class="filtr-container">

  <script type="template" id="card-template">
    <div class="col-12 col-sm-6 col-md-4 card filtr-item" data-category="{{categories}}" data-date="{{date}}">
      <div class="card-inner-border box-shadow">
        <a href="{{address}}">
          <img class="card-img-top rounded-top" src="{{image}}" alt="{{image-alt}}">
        </a>
        <div class="card-body">
          <h5 class="card-title">{{title}}</h5>
          <p class="card-text card-desc">
            {{description}}
          </p>
          <a href="{{address}}">
            <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
          </a>
          <p class="card-text">
            <small class="text-muted">Last updated {{update}}</small>
          </p>
        </div>
      </div>
    </div>
  </script>