How to import javascript file in other javascript file?

Question

I know that the question has already been asked but it did not solve my problem! That's why I ask again!

I have a JavaScript file with a variable and a function. I would like to apply this function in another JavaScript file.

For that, I have to import a file into another one. And I can not do it despite attempts via internet tutorials ...

My code so far:

countries.js:

var isoCountries = {
    'AF' : 'Afghanistan',
    'AX' : 'Aland Islands',
    [...]
    'FK' : 'Falkland Islands (Malvinas)',
    'FO' : 'Faroe Islands',
    'FJ' : 'Fiji',
    'FI' : 'Finland',
    'FR' : 'France',
    [...]
    'YE' : 'Yemen',
    'ZM' : 'Zambia',
    'ZW' : 'Zimbabwe'
};

function getCountryName (countryCode) {
    if (isoCountries.hasOwnProperty(countryCode)) {
        return isoCountries[countryCode];
    } else {
        return countryCode;
    }
}

loadJSON.js in which I need this function



$('countries.js', function() {
  alert("Script loaded but not necessarily executed.");
})

$.getJSON('js/issuers.json', function(donnees) {
  let jsonData = "";
  let count = 1;

    $.each( donnees, function( key, val ) {
      if (count === 1) {
        jsonData += "<div class='row'>"
      }

    jsonData +=
    "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+
        "<div class=\"card\">"+
          "<div class=\"card-container-img\">"+
            "<img src=\""+val.logo+"\"+ class=\"card-img-top\" alt=\""+val.name+"\">"+
          "</div>"+
        "<div class=\"card-body\">"+
      "<h2 class=\"issuer-name\">"+val.name+"</h2>"+

        "<p class=\"issuer-important\"><span class=\"country\">"+getCountryName(val.country)+"</span> <span class=\"continent\">"+val.continent+"</span></p>"+
        "<p class=\"issuer-number\">"+val.address+"</p>"+
      "<p class=\"declaration\">"+
        "<i class=\"icon-quote-start quote\"></i>"+
        val.intentDeclaration+
          "<i class=\"icon-quote quote\"></i>"+
      "</p>"+
        "<p class=\"collapse multi-collapse"+key+" declaration-all\" id=\"multiCollapseI"+key+"\">"+
      "<i class=\"icon-quote-start quote\"></i>"+
      val.intentDeclaration+
      "<i class=\"icon-quote quote\"></i>"+
      "</p>"+
      "<div class=\"validator\">"+
      "<p class=\"issuer-important\">Autorisé par"+
        "<a href=\"http://bcdiploma.com\"target=\"_blank\">"+
          "<img src=\""+"img/icons/bcdiploma-logo-header.svg"+"\" class=\"card-img-bottom\" alt=\"bcdiploma\">"+
        "</a>"+
        "</p>"+
    "</div>"+
  "<a data-toggle=\"collapse\" data-target=\".multi-collapse"+key+"\" aria-expanded=\"false\" >"+
  "<i class=\"ti-plus\" id=\"plus\"></i>"+
"</a>"+
  "<div class=\"collapse multi-collapse"+key+"\" id=\"multiCollapseV"+key+"\">"+
  "<p>"+
    "Blockchain Certified Data SAS - 84, av Albert 1er 92500 Rueil-Malmaison FRANCE"+
    "<p class=\"issuer-number\">0x7332ea1229c11c627c10eb24c1a6f77bced1d5c1</p>"+                         
  "</p>"+
        "</div>"+
  "</div>"+
  "</div>"+
"</div>" 

if (count === 4) {
  jsonData += "</div>"
}

count = (count%4) + 1;

});
   $(".testjson").html(jsonData); 
});

// TABLE
$.getJSON('js/issuers.json', function(donneestable) {
  let jsonDataTable = "";

    $.each( donneestable, function( key, val ) {

    jsonDataTable += 
        "<tr>"+
            "<td style='display:none;'>"+val.logo+"</td>"+
            "<td><h3>"+val.name+"</h3></td>"+
            "<td>"+val.date+"</td>"+
            "<td><div class='number-table'>"+val.address+"</div></td>"+
            "<td>"+val.validatorName+"</td>"+
            "<td>"+val.country+"</td>"+
            "<td>"+val.continent+" <i class='ti-plus' id='plus-list'></i></td>"+
            "<td style='display:none;'>"+val.legalReference+"</td>"+
            "<td style='display:none;'>"+val.intentDeclaration+"</td>"+
            "<td style='display:none;'>"+val.validatorLegalReference+"</td>"+     
            "<td style='display:none;'>"+val.validatorAddress+"</td>"+  
            "<td style='display:none;'>"+val.website+"</td>"+   
            "<td style='display:none;'>"+val.validatorLogo+"</td>"+  
            "<td style='display:none;'>"+val.validatorWebsite+"</td>"+                  
        "</tr>"
});
   $(".table-json").html(jsonDataTable); 
});


// ROW CHILD


function format ( d ) {
  // `d` is the original data object for the row
  return '<td class="background no-border">' +
   '<img class="logo-table" src="'+d[0]+'"/>' +
   '</td>' +
   '<td class="background no-border"><p class="title-rowchild">Références légales</p><p class="p-rowchild">'+d[7]+'</p>'+
   '<p class="title-rowchild">Déclaration d\'intention</p><p class="p-rowchild-end">'+d[8]+'</p>'+
   '<a class="website" target=_blank href="'+d[11]+'">Visiter le site</a>'+
   '</td>'+
   '<td class="no-border">'+
   '<img style="width: 20%;" src="'+d[12]+'"/>' +
   '<p class="title-rowchild">Références légales</p><p class="p-rowchild">'+d[9]+'</p>'+
   '<p class="title-rowchild">Adresse de la Blockchaine</p><p class="p-rowchild-end">'+d[10]+'</p>'+
   '<a class="website" target=_blank href="'+d[13]+'">Voir la liste</a>'+
   '</td>'
   ;
}

The alert (for testing) doesn't working

`contains the variable` actually, there is no variable in that piece of code, there's only `countryCode` which is the functions argument ... is that what you mean .... also, why do you need this function in the "other file" if you never call it? — Jaromanda X, Apr 16 '19 at 10:10
Possible duplicate of [How do I include a JavaScript file in another JavaScript file?](https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file) — Mohammed Rabiulla RABI, Apr 16 '19 at 10:11
Your code doesnot have anything which shows you implementing the imports — Krishna Prashatt, Apr 16 '19 at 10:15
Hello and thank you for your answers. I'm sorry, I did not copy all my code to lighten but I see that it is problematic. I edit my post to be clearer. I also look at your advices thank you! — Carine, Apr 16 '19 at 10:27
Thanks to M.K. for correcting me. I am French and my English is not very good — Carine, Apr 16 '19 at 10:28
Krishna Prashatt I removed it because it did not work. I will put everything — Carine, Apr 16 '19 at 10:30

Ayon Alfaz · Accepted Answer · 2019-04-16T12:33:30.140

2

You can include a js file in an html page. You can write js which loads your included js into the same page.

var ext_file = document.createElement('script');
ext_file.src = '/PathToImportedJs'; // provide path of your 2nd js in here
document.head.appendChild(ext_file);

edited Apr 16 '19 at 12:33

answered Apr 16 '19 at 10:15

Ayon Alfaz

96
1
6

Hello and thank you for your answer ! I'm not sure I understood. Like this in my loadJSON.js ? var ext_file = document.createElement('script'); ext_file.src = 'countries.js'; document.head.appendChild(ext_file); – Carine Apr 16 '19 at 10:35
@Carine Yes. Correct. Suppose, you have a html file named index.html . In there, you will load your js file - loadJSON.js at first. In that file, you will write that following code. For more details, you can check this url for 'Loading JavaScript without blocking' - https://humanwhocodes.com/blog/2009/06/23/loading-javascript-without-blocking/ – Ayon Alfaz Apr 16 '19 at 12:27
pleasure (Y) @Carine – Ayon Alfaz Nov 20 '19 at 07:30

How to import javascript file in other javascript file?

1 Answers1