使用JSON中的JS生成HTML页面

时间:2012-03-08 21:39:15

标签: javascript html json parsing

我正在寻找一个使用Javascript解析JSON文件并输出html文件或填充html文件的基本示例。到目前为止我找到的所有示例都有代码片段,我没有背景填写之间的空白。

感谢任何小提琴(很棒),链接和智能评论。

5 个答案:

答案 0 :(得分:14)

您可以使用微型模板库(如Mustache)使用{{ key }}模板语法将传入的JSON对象解析为HTML代码段。如果您的对象如下:

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);

输出:

您好,我叫Joe Smith,今年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>

答案 1 :(得分:14)

模板示例

我建议使用模板工具,例如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说明手动完成。

答案 2 :(得分:3)

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

答案 3 :(得分:2)

所以我假设你的意思是你的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并进行渲染 但请注意,从服务器传输时将HTML嵌入JSON中会被视为安全漏洞。 相反,您可以使用AJAX直接从服务器获取部分HTML,然后使用javascrip和REST / SOA将动态值替换为部分HTML(模板)

希望这会有所帮助

答案 4 :(得分:0)

EJS或嵌入式java脚本,非常有趣。您可以使用像骨干或Facebook的React这样的前端框架,它更加复杂。关于EJS的codechool节点课程,有一些很好的视频教程。这是一个例子

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

与EJS一样简单:

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

获取文字:'现在去SF参加派对'

使用EJS,或者我喜欢的PEJS,你可以做,如果,切换,换(),日期().....你明白了。查看此处查看Pejs并阅读EJS。你可以做很多很酷的东西