使用 pug 和 ajax 渲染动态表的解决方案答案

【问题标题】：solution to use pug with ajax to rending a dynamic table使用 pug 和 ajax 渲染动态表的解决方案
【发布时间】：2018-08-01 02:09:29
【问题描述】：

我在服务器上有一个json文件，我的目的是根据json文件中的内容渲染一个表格，里面包含各种链接。

所以，pug 文件看起来像：

script.
        $.getJSON("/db/url.json", function(json) {
            console.log('DEBUG: from PUG: 1st URL in the JSON: ' + json[0].urls[0].url)
        });

table.table
  thead
    tr
      th.bg-primary.text-center.font-weight-bold.text-white(scope='col' colspan=7)
          a.btn.btn-primary(data-toggle='collapse' href='#collapseExample' role='button' aria-expanded='true' aria-controls='collapseExample')
            | Section-1
  tbody.collapse.show(id='collapseExample')
    tr
       // Table contains will be got from the url.json file

url.json 文件可以很好地加载。但是我对如何使用这个 json 来填充 pug 模板中的表感到沮丧。你能提供什么想法吗？

jason 文件如下所示：

  {
    "name": "Section-1",
    "desc": "Section-1",
    "urls": [
      {
        "name": "Google",
        "url": "http://www.google.com"
      },
      {
        "name": "xxx",
        "url": "http://10.182.44.97/"
      }
    ]
  }

【问题讨论】：

标签： jquery ajax pug

【解决方案1】：

由于您已经在getJSON 的回调中获得了数据，因此您可以在同一个回调中继续使用 jQuery 动态填充 DOM 并将数据插入到您的表中

【讨论】：

可以插入哈巴狗吗？因为哈巴狗的结构更整洁，更容易处理。
@Solaris_9 如果我正确理解您的情况：您在服务器端有 json 文件，那么为什么不直接通过 express app.render 将 json 数据传递给 pug，而不是使用 ajax。你可以试试app.render('index.pug', { data: your-json }
我会研究这个选项并回复你。感谢您的建议。