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

Question

我有以下的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本身出现，而是希望该文件中的文本出现？

因此，最终的输出将是：

名称： wiredep 版本： 4.0.0 许可路径内容： 麻省理工学院许可证(麻省理工学院) 版权(c) 2014 Stephen Sawchuk 兹准许任何获得本软件副本和相关文件文件(“软件”)的人不受限制地处理软件，包括(但不限于)使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许被提供软件的人这样做，但须符合下列条件： 上述版权通知和本许可通知应包括在软件的所有副本或实质性部分。 软件按“原样”提供，没有任何明示或暗示的担保，包括但不限于适销性、特定用途的适用性和不侵权的担保。在任何情况下，作者或版权持有人均不得因与该软件有关的或与该软件有关的使用或其他交易而因或而引起的任何申索、损害或其他法律责任，不论是在合约诉讼、侵权或其他方面引起的。

Answer 1

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