How do I render a text inside a file into another html page using jQuery's json2html?

Question

I have the following json:

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

Now I am rendering it on an html page using the following code:

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

Inside /licenses/wiredep is text that contains the licensing information. I want to be able to render it as well inside the HTML page. So instead of the licensepath itself appearing, I'd like the text inside that file to appear?

So the final output would be:

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.

@zfrisch How do I render a text inside a file into another html page using jQuery's json2html? — Karen M., Dec 03 '18 at 17:32

score 3 · Answer 1 · answered Dec 03 '18 at 17:42

JSON2HTML doesn’t know what to do with a file path. If you want the contents of a file to be included in the output, you’ll need to add it yourself to data before passing that to json2html().

So the question becomes “How can I get the text of a file from its path in javascript?”, to which the answer isn’t as complicated as you might have expected. Since you’re already using jQuery, I’ll provide a solution using jQuery.get(), but this is of course possible without using jQuery as well.

There are two parts to this process: first you must initiate a request to the server, telling it you want the contents of a file. This is done using the aforementioned jQuery.get():

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

That’s it! Now for the second part: you have to wait for the server to respond with the file you’ve requested. We do this by binding a callback function to the request. There are several available to you, which are called in different situations. In this instance, we’ll ignore any errors for simplicity and just focus on the case where the response from the server is okay. In this case, the .done() callback will be fired:

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

Now to tie this all together with your code. I’m deliberately ignoring the fact that data is an array which may contain more than one object.

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

How do I render a text inside a file into another html page using jQuery's json2html?

1 Answers1