Question

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

感谢任何小提琴（很棒），链接和智能评论。

Answer 1

您可以使用微型模板库（如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>

Answer 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说明手动完成。

Answer 3

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

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

希望这会有所帮助

Answer 5

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。你可以做很多很酷的东西

使用JSON中的JS生成HTML页面

5 个答案:

模板示例

替代