如何使用jQuery的json2html将文件中的文本呈现到另一个html页面?

时间:2018-12-03 17:18:39

标签: javascript jquery html json json2html

我有以下json:

var data = [
  {
    "name": "wiredep",
    "version": "4.0.0",
    "link": "https://github.com/taptapship/wiredep",
    "licensePath": "/licenses/wiredep"
  }
];

现在,我使用以下代码将其呈现在html页面上:

var transform = {"<>":"li","html":[
                    {"<>":"span class='name'","html": [{ "<>":"a", "href": " ${link}", "html": " ${name}"}]},
                    {"<>":"span class='vers'", "html":" ${version}"}, 
                    {"<>":"div","html":" ${licensePath}"}
                ]};
$(function(){
    // Create the list
    $('#list').json2html(data,transform);
});

/licenses/wiredep内是包含许可信息的文本。我希望能够在HTML页面中也呈现它。因此,我希望不显示licensepath本身,而是显示该文件中的文本?

所以最终输出将是:

  

名称: wired

     

版本: 4.0.0

     

许可路径内容:

     

MIT许可证(MIT)

     

版权所有(c)2014 Stephen Sawchuk

     

特此免费授予获得此软件和相关文档文件(以下简称“软件”)副本的任何人无限制使用本软件的权利,包括但不限于使用,复制,修改,合并,发布,分发,再许可和/或出售本软件的副本,并允许具有本软件的个人遵循以下条件:

     

上述版权声明和本许可声明应包含在本软件的所有副本或重要部分中。

     

按“原样”提供该软件,不提供任何形式的明示或暗示的保证,包括但不限于对适销性,特定目的的适用性和非侵权性的保证。无论是由于软件,使用或其他方式产生的,与之有关或与之有关的合同,侵权或其他形式的任何索赔,损害或其他责任,作者或版权所有者概不负责。软件。

1 个答案:

答案 0 :(得分:2)

JSON2HTML不知道如何处理文件路径。如果要将文件内容包含在输出中,则需要将其自己添加到data 之前,然后将其传递到json2html()

因此问题变成“ 如何从javascript中的文件路径中获取文件的文本?”,答案并不像您期望的那么复杂。由于您已经在使用jQuery,因此我将使用jQuery.get()提供解决方案,但是当然也可以不使用jQuery。

此过程分为两个部分:首先,您必须向服务器发起一个请求,告诉它您想要文件的内容。使用前面提到的jQuery.get()

$.get('/licenses/wiredep');

就是这样!现在第二部分:您必须等待服务器响应您请求的文件。我们通过将回调函数绑定到请求来实现。有几种可供您使用的名称,它们在不同的情况下会被调用。在这种情况下,为简单起见,我们将忽略所有错误,仅关注服务器响应正常的情况。在这种情况下,将触发.done()回调:

$.get('/licenses/wiredep').done(function(data) {
  console.log('Contents of /licenses/wiredep:', data);
});
  

注意:此回调异步执行。这意味着不保证在回调函数之外的任何代码都不能在请求完成后执行,即使在请求后也要执行

现在将所有这些与您的代码绑定在一起。我故意忽略了一个事实,即data是一个数组,可能包含多个对象。

$.get('/licenses/wiredep').done(function(response) {
  var data = [
    {
      "name": "wiredep",
      "version": "4.0.0",
      "link": "https://github.com/taptapship/wiredep",
      "licensePath": response
    }
  ];

  var transform = {"<>":"li","html":[
                      {"<>":"span class='name'","html": [{ "<>":"a", "href": " ${link}", "html": " ${name}"}]},
                      {"<>":"span class='vers'", "html":" ${version}"}, 
                      {"<>":"div","html":" ${licensePath}"}
                  ]};

  $('#list').json2html(data, transform);
});