javascript - 如何使用 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 本身，而是希望显示该文件中的文本？

所以最终的输出是:

Name: wiredep

Version: 4.0.0

License Path content:

The MIT License (MIT)

Copyright (c) 2014 Stephen Sawchuk

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Answer 1

JSON2HTML 不知道如何处理文件路径。如果您希望文件的内容包含在输出中，您需要自己将其添加到 data before 将其传递给 json2html().

所以问题变成了“我如何在 javascript 中从文件的路径中获取文件的文本？”，答案并不像您预期​​的那么复杂。由于您已经在使用 jQuery，我将提供一个使用 jQuery.get() 的解决方案，但这当然也可以在不使用 jQuery 的情况下实现。

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

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

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

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

Note: This callback is executed asynchronously. This means any code outside of the callback function is not guaranteed to be executed after the request is complete, even if it comes after the request.

现在将这一切与您的代码联系在一起。我故意忽略了 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);
});