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
– Jaromanda X, Commented Apr 16, 2019 at 10:10
did you try declare <script src="loadJSON.js"></script> before <script src="countries.js"></script> — Hien Nguyen
– Hien Nguyen, Commented Apr 16, 2019 at 10:10
Possible duplicate of How do I include a JavaScript file in another JavaScript file? — Mohammed Rabiulla RABI
– Mohammed Rabiulla RABI, Commented Apr 16, 2019 at 10:11
Your code doesnot have anything which shows you implementing the imports — Krishna Prashatt
– Krishna Prashatt, Commented Apr 16, 2019 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
– Carine, Commented Apr 16, 2019 at 10:27

Ayon Alfaz · Accepted Answer · 2019-04-16 12:33:30Z

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, 2019 at 12:33

answered Apr 16, 2019 at 10:15

Ayon Alfaz

1061 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carine Over a year ago

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

Ayon Alfaz Over a year ago

@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' - humanwhocodes.com/blog/2009/06/23/…

Ayon Alfaz Over a year ago

pleasure (Y) @Carine

Collectives™ on Stack Overflow

How to import javascript file in other javascript file?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related