在无服务器框架中将数组从一个 js 文件传递到另一个 js 文件

在一个js文件中，我正在将数据分配给一个对象。该对象具有对象数组。

const data = { 
  details: [
    {name: 'John', surname: 'Smith'},
    {name: 'Will', surname: 'Smith'},
    {name: 'Jessica', surname: 'Smith'}
  ]
};

我想在下面的 js 文件中调用这个数组。此 js 文件将以 html 格式返回。我想在html中调用data.details并以html表格格式获取它。当我直接在 html 中传递数组时，它可以工作。但是当我将其作为 $data.details 传递时，它不起作用。

const PDF = data => {
  return `<!doctype html>
          <html lang="en">
            <div>
              <p class="note">
                <b>Details:</b>
              </p>
              <table border="1" cellpadding="0" cellspacing="0" style="font-size: 14px; width: 500px;">
                <thead>
                  <tr>
                    <th scope="col">
                      <h5>Name</h5>
                    </th>
                    <th scope="col">
                      <h5>Surname</h5>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <script language="javascript" type="text/javascript">         
                    var details = ${data.details};
                    for (var i = 0; i < details.length; i++) {
                      document.write("<tr><td>" + details[i].name + "</td>");
                      document.write("<td>" + details[i].surname + "</td>");                    
                    }
                  </script>
                </tbody>
              </table>
            </div>
          </body>
        </html>`;
};
export default { PDF };

请帮助解决这个问题。谢谢。

我不

明白你为什么选择这种方式，但你可以通过jQuery将外部js文件加载到js文件中。

$.getScript("script1.js", function() {
   console.log("script1 loaded. You can use script1 variables here!");
});

如果数据在服务器端已经可用，则无需在客户端呈现它。只需立即构建您的桌子。

const PDF = data => {
    const renderRow = detail => `
        <tr>
            <td>${detail.name}</td>
            <td>${detail.surname}</td>
        </tr>
    `
    const renderDetails = data => {
        return data.details.map(renderRow)
    }
    return `<!doctype html>
          <html lang="en">
            <div>
              <p class="note">
                <b>Details:</b>
              </p>
              <table border="1" cellpadding="0" cellspacing="0" style="font-size: 14px; width: 500px;">
                <thead>
                  <tr>
                    <th scope="col">
                      <h5>Name</h5>
                    </th>
                    <th scope="col">
                      <h5>Surname</h5>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  ${renderDetails(data)}
                </tbody>
              </table>
            </div>
          </body>
        </html>`;
};
export default {PDF};

相关内容

最新更新

热门标签：