从 JSON 生成带有 JS 的 HTML 页面答案

【问题标题】：Generate HTML page with JS from JSON从 JSON 生成带有 JS 的 HTML 页面
【发布时间】：2012-03-26 09:22:54
【问题描述】：

我正在寻找一个使用 Javascript 解析 JSON 文件并输出 html 文件或填充 html 文件的非常基本的示例。到目前为止，我找到的所有示例都有代码 sn-ps 并且我没有背景来填充它们之间的空白。

感谢您提供的任何小提琴（太棒了）、链接和智能 a*s cmets。

【问题讨论】：

你的意思是像var data = JSON.parse('{"foo": "42"}'); document.body.appendChild(document.createTextNode(data.foo)); ？解析 JSON 很容易。您可以使用适当的方法（createElement、appendChild）添加 DOM 元素。必须创建哪些元素以及应该显示哪些数据取决于您想要什么，对此没有规范的答案。使用模板可能会更好。
终于有人愿意感谢我的聪明评论，我想不出一个！
是的，除了 JSON 将在其自己的文件中位于同一服务器上。我想我刚刚找到了一个小提琴。 jsfiddle.net/qmacro/NJMyD

【解决方案1】：

您可以使用微模板库，例如 Mustache，使用 {{ key }} 模板语法将传入的 JSON 对象解析为 HTML sn-ps。如果您的对象看起来像：

var myObj = {
    name: 'Joe Smith',
    age: 25,
    features: {
        hairColor: 'red',
        eyeColor: 'blue'
    }
};

使用 Mustache，您可以轻松地将其渲染为 HTML，使用 {{#}} 和 {{/}} 遍历嵌套对象：

Mustache.render('Hello, my name is {{name}} and I am {{age}} years old. {{#features}} I have {{hairColor}} hair and {{eyeColor}} eyes.{{/features}}', myObj);

哪个输出：

您好，我叫乔·史密斯，今年 25 岁。我有一头红头发和蓝眼睛。

编辑：更密切的应用程序 - 使用具有嵌套对象列表的模板动态生成控制面板。这是我的模板和对象（为清晰起见，将 HTML 分解为列表并加入）：

var panel = [
  '<div id="cpanel">',
    '{{#cpanel}}',
      '<div class="panel_section">',
        '<h1 class="cpanel">{{name}}</h1>',
        '<p>',
          '{{#content}}',
            '<button id="{{id}}">{{id}}</button>',
          '{{/content}}',
        '</p>',
      '</div>',
    '{{/cpanel}}',
  '</div>',
].join('\n');

var panelObj = {
  cpanel: [
  {
    name: 'playback',
    content: [
      {id: 'play'},
      {id: 'pause'},
      {id: 'stop'}
    ]
  }, {
    name: 'zoom',
    content: [
      {id: 'zoomIn'},
      {id: 'zoomOut'}
    ]
  }]
};

然后你用 Mustache 渲染：

Mustache.render(panel, panelObj);

哪个输出：

<div id="cpanel">
  <div class="panel_section">
    <h1 class="cpanel">playback</h1>
    <p>
      <button id="play">play</button>
      <button id="pause">pause</button>
      <button id="stop">stop</button>
    </p>
  </div>
  <div class="panel_section">
    <h1 class="cpanel">zoom</h1>
    <p>
      <button id="zoomIn">zoomIn</button>
      <button id="zoomOut">zoomOut</button>
    </p>
  </div>
</div>

【讨论】：

【解决方案2】：

模板示例

我建议使用模板工具，例如 PURE...

这种工具的目的是分离逻辑和表示。

例如，使用上述工具从 JSON 数据生成列表如下所示：

JSON 数据文件

{'who':'BeeBole!'}

HTML 文件

<html>

<head>
  <title>PURE Unobtrusive Rendering Engine</title>

  <script src="../libs/jquery.js"></script>
  <script src="../libs/pure.js"></script>
</head>

<body>
  <!-- the HTML template -->
  Hello <a class="who" href="#"></a>

  <script>
    // the JSON data we want to render
    $.getJSON('yourJSONdataFile.json', function(data) {
        // run the rendering
        $('a').autoRender(data);
        // PURE tries to match class with the JSON property and replace the node value with the value of the JSON property
    });
  </script>
</body>
</html>

如果您有简单的 JSON 数据，这是最基本的方法（请参阅工作 JSFiddle 示例 there）。如果基本方法不合适，Get Started 指南将引导您了解另一个示例。如需更多高级功能，请查看documentation。

替代方案

在上面的例子中使用 PURE 并没有什么特别的原因。你有很多选择：

...或者您可以按照there 的说明手动操作。

【讨论】：

【解决方案3】：

您可能想查看jQuery.dForm。它有助于使用 JSON 动态创建 HTML 和表单。

【讨论】：

【解决方案4】：

所以我假设你的意思是你的 JSON 中包含 HTML 字符串。

假设您的 JSON 是：

{

"htmlString" : "<div> now thats smart! </div>"

}

您可以通过如下编写 HTML 来在 HTML 中呈现它：

    <html>
    <head>

    var myjson = {"htmlString" : "<div> now thats smart! </div>"}

    <script type="text/javascript">

    function loadHTML() {

    document.getElementByTagName("body").innerHTML(myjson["htmlString"]);

    }

    </script>
</head>
<body onload='loadHTML()'>
</body>
</html>

请注意，您还可以使用 AJAX 获取 JSON 并呈现它但是，请注意，从服务器传输时在 JSON 中嵌入 HTML 被视为安全漏洞。相反，您可以使用 AJAX 直接从服务器获取部分 HTML，然后使用 javascrip 和 REST/SOA 将部分 HTML（模板）替换为动态值

希望对你有帮助

【讨论】：

谢谢维杰。我可能没有正确描述我的问题。我想使用一个 JSON 数据文件，用 javascript 抓取它，然后用 HTML 格式化它。

【解决方案5】：

EJS 或嵌入式 java 脚本，很好玩。您可以使用更复杂的前端框架，例如骨干网或 facebook 的 React。在 codeschool 的 EJS 节点课程上有一些很好的视频教程。这是一个例子

  var foo = {'city':'SF', 'party':'now'}

使用 EJS 就这么简单：

   <div> <p> going to <%= foo.city %> to party <%= foo.party %> </p></div>

获取文本：'现在去旧金山参加派对'

使用 EJS 或我最喜欢的 PEJS，您可以执行 if、switch、for()、Date() .....您明白了。在此处查找Pejs 并阅读EJS。你可以做很多很酷的事情

【讨论】：