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

时间：2019-01-24 15:11:09

标签： javascript jquery html json csv

我正在尝试使以下代码更易于维护。我不是网络开发人员，所以请多多包涵。我认为以下方法是合适的。

我想使用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的标头不匹配（例如<p class="card-desc">与.csv的{​​{1}}标头对齐）
  • 可能会有嵌入的逗号分隔项（例如，项2具有类别description，因此它在cat-2, cat-3中得到了引号"-也许.csv会更好（？ ），或者可能是非问题）
  • 如果可以的话，我们可以将.json项重用于date和最后一段文本data-date=，将日期转换为<small class="text-muted">而不是Last updated month-name-long, dd, yyyy 。
  • 某些属性是部分引用（例如，图像的src只是路径的最后一部分；在yyyy-mm-dd中以image-1.jpg表示，不是 {{1} }）。

为希望减轻这种麻烦，下面是一张带有突出显示的元素的图片，可以从.csv文件中对其进行“引用”。

Image highlighted referenced elements

对我来说，这就像：

  1. 读取.csv文件。
  2. 对于.csv文件中的每一项，请使用外壳布局将对象附加到./images/image-jpg。

但是，如果涉及到细节或这是适当的方法，我会迷失。

2 个答案:

答案 0 :(得分：1)

您似乎正在搜索模板解析。您可以找到许多可以减轻这种负担的库。模板解析以最简单的形式执行以下代码中的步骤。如果您不需要模板解析器库或完整框架的灵活性，功能，功能等，如果您要完成的工作如下所示，则应考虑不包括数千行代码。

由于您同时提到了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>

答案 1 :(得分：0)

此信息可能会对您parse your CSV document有帮助。如果您的数据使用JSON，则可以使用JSON.parse

一旦您正确检索并解析了数据，就可以将其呈现给DOM。

您可以使用标准的JavaScript库，JQuery或诸如React或VueJS之类的框架来实现

相关问题
最新问题