从 JSON 生成带有 JS 的 HTML 页面

Posted

技术标签:

【中文标题】从 JSON 生成带有 JS 的 HTML 页面【英文标题】:Generate HTML page with JS from JSON 【发布时间】: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 很容易。您可以使用适当的方法(createElementappendChild)添加 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 并没有什么特别的原因。你有很多选择:

EJS Mustache Tempo JSON Template jQuote2 JTemplates

...或者您可以按照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。你可以做很多很酷的事情

【讨论】:

以上是关于从 JSON 生成带有 JS 的 HTML 页面的主要内容,如果未能解决你的问题,请参考以下文章

使用 Node.js 和 express-handlebars 从 JSON 文件渲染 html

PHP分页类,生成分页html字符串

发送带有 json 的 html 文件并让浏览器重新加载该 json 而无需重新加载页面

引导页脚旋转问题

html 从外部(JSON)数据生成的D3.js树图

无法使用 fetch API 请求带有 HTML 页面的 localhost 节点服务器