javascript - 将 JSON 信息存储在 HTML 文件中,或者反之亦然

标签 javascript jquery json html electron

这个标题可能有点令人困惑,但我不知道如何换句话说。我在 .json 文件中有一些 JSON 编码数据:

{"foo":"bar", "bar":"foo", "far":"boo"}

以及 .html 文件中的一些 HTML 内容:

<h1>I'm a Title</h1>
<p>Lorem Ipsum</p>
<br>
<img src="./media/foo.png">

有一个 jQuery 脚本,它从两个文件($.getJSON()$(#div).load())获取数据并创建一个页面使用一些预定义的头,使用 html 作为内容和 json 数据在上面创建一些按钮(key=destination & value=name)。

因为该项目有很多这样的页面,所以我希望只有一个文件来保存我的 HTML 内容和 JSON 数据,因此我拥有一个页面所需的全部内容就是单个文件访问。所以问题实际上是:如何将 JSON 和 HTML 数据存储在一个文件中,以便 jQuery 可以访问、区分和处理它?<​​/strong>

这是 Electron 应用程序的一部分,但我不确定这对于这个问题是否重要。

最佳答案

假设json文件的内容是一个json对象,可以将其分配给脚本标签中html文档中的javascript变量。

然后要引用,例如 foo,您可以使用 theJsonObject.foo;

使用以下 JavaScript 片段,您可以在浏览器的控制台中看到每个属性的名称和值。

如何将其混合到当前代码中取决于您如何编写它。但请确保在使用变量之前已声明该变量。

for (let prop in theJsonObject) {  
  console.log( prop + ": " + theJsonObject[prop] );
};
<html>
  <head>
      ....
      <script>
         var theJsonObject = {"foo":"bar", "bar":"foo", "far":"boo"};
      </script>
  </head>
  <body>
      ....
  </body>
</html>

关于javascript - 将 JSON 信息存储在 HTML 文件中,或者反之亦然,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52682085/

相关文章:

javascript - 动态更新 Highcharts 图表上的副标题?

Javascript 提示对话框自定义输入

jquery - MVC - ClientValidationEnabled = true,但仍然有回发,毁了我的 jQuery

javascript - 如何使滚动到仅特定于桌面 View 的 ID 并在移动 View 上默认它?

javascript - 检查回调是否最后被触发的方法?

javascript - Webpack 加载器测试是否运行多次?

javascript - 使用 jquery 显示和隐藏输入

php - 将 json_encode 与 jquery.ajax() 一起使用时如何返回特定值?

objective-c - fatal error : unexpectedly found nil while unwrapping an Optional value, 快速获取 json 错误

php - 使用 php 从外部 url 获取 application/ld+json