Javascript 从JSON生成带有JS的HTML页面_Javascript_Html_Json_Parsing

Javascript 从JSON生成带有JS的HTML页面

javascript html json parsing

Javascript 从JSON生成带有JS的HTML页面,javascript,html,json,parsing,Javascript,Html,Json,Parsing,我正在寻找一个使用Javascript解析JSON文件、输出html文件或填充html文件的非常基本的示例。到目前为止，我找到的所有示例都有代码片段，我没有背景来填补空白感谢您提供的任何提琴（这将是非常棒的）、链接和智能a*s评论。所以我假设您的JSON包含HTML字符串假设您的JSON是： { "htmlString" : "<div> now thats smart! </div>" } { “htmlString”：“现在这很聪明！” } 您可以通过如下

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

感谢您提供的任何提琴（这将是非常棒的）、链接和智能a*s评论。

所以我假设您的JSON包含HTML字符串

假设您的JSON是：

{

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

}

{
“htmlString”：“现在这很聪明！”
}

您可以通过如下方式编写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>


var myjson={“htmlString”：“现在这很聪明！”
函数loadHTML（）{
document.getElementByTagName（“body”）.innerHTML（myjson[“htmlString”]）；
}

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

希望这有帮助

您可以使用微模板库，例如，使用

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

哪些产出：

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

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

编辑：更密切的应用程序-使用带有嵌套对象列表的模板动态生成控制面板。下面是我的模板和对象（HTML被分解成一个列表，并为了清晰起见连接起来）：

哪些产出：

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


回放

玩
暂停
停止

快速移动

缩放
zoomOut

模板化示例我建议使用模板工具，例如

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

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

JSON数据文件

{'who':'BeeBole!'}

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

HTML文件

{'who':'BeeBole!'}

<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数据
$.getJSON（'yourJSONdataFile.json'，函数（数据）{
//运行渲染
$（'a'）。自动转发器（数据）；
//PURE尝试将类与JSON属性匹配，并用JSON属性的值替换节点值
});

如果您有简单的JSON数据，这是最基本的方法（请参阅正在工作的JSFIDLE示例）。。若基本方法不合适，指南将引导你们通过另一个例子。有关更高级的功能，请参阅

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

…或者您可以按照说明手动执行。

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

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（）。。。。。你明白了。在这里寻找并阅读。你可以做很多很酷的事情

你的意思是像

var data=JSON.parse（“{”foo:“42”}”）；document.body.appendChild（document.createTextNode（data.foo））？解析JSON很容易。您可以使用适当的方法添加DOM元素（createElement
，appendChild
）。哪些元素必须被创建，哪些数据应该被显示取决于您想要什么，对于这一点没有规范的答案。你最好使用模板。终于有人愿意感谢我的评论，我想不出一个！是的，除了JSON在同一台服务器上的“自己的文件”中。我想我刚找到一把小提琴。谢谢你，维杰。我可能没有正确地描述我的问题。我想使用一个JSON数据文件，用javascript获取它，然后用HTML格式化它。