将 JSON 信息存储在 HTML 文件中或以其他方式存储答案

【问题标题】：Store JSON information within a HTML file or the other way around将 JSON 信息存储在 HTML 文件中或以其他方式存储
【发布时间】：2019-03-11 22:24:01
【问题描述】：

这个标题可能有点混乱，但我不知道该怎么说。我在 .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 可以访问、区分和处理它？

这是电子申请的一部分，但我不确定这对那个问题是否重要。

【问题讨论】：

将.json重命名为.js，在开头加上var links = ，然后就可以在js里面轻松使用了
@JonasWilms 感谢您的快速答复！不幸的是我不明白。 HTML 去哪里了？你能详细说明一下吗？
JSON 是 JavaScript Object Notation 的缩写，所以 '{ "a": 1 }' 是一个 JSON 字符串，{ "a": 1 } 只是一个 javascript 对象。你可以把它放在脚本部分并使用它

标签： javascript jquery json html electron

【解决方案1】：

json 文件的内容假设它是一个 json 对象，可以在 script 标签中分配给 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>

【讨论】：

这看起来很有希望。在这种情况下，我如何在不知道键和值的情况下迭代它们？
在示例中，JsonObject 成为具有 foo、bar 和 far 属性的对象。
用于（对象中的变量）{}
您能否提供一个如何获取键和值的示例？它只是告诉我 theJsonObject 没有定义..
我添加了一个 javascript sn-p，向您展示了 for in 循环的工作原理。