0

I am new to Java script and in an assignment I am directed to create 2 JS files and then display data dynamically in HTML. One JS file data.js file have an array of objects (lets say table of items) and another JS file has function which loads those items, create HTML elements and display items (catalog) on HTML page.

I have found relevant post [here](How do I include a JavaScript file in another JavaScript file? cript-file-in-another-java script-file) . But I am still unable to understand that how to access display data from 1 JS file while loadfunction() is located into another JS file. Also I don't know how to assign an External CSS class to this dynamically created element.In boutique.js the syntax isitemName.classList.add("addCSS");` Please help me in this regard. Thank you.

> data.js

 
var catalog = [
  {
    code: 100,
    name: "Learn JS",
    desc: "To make your web paged dynamic",
    price: 150,
    image: "/images/100Tshirt.jpg"
  },
  {
    code:101 ,
    name: "T Shirt",
    desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
    price: ,
    image: "/images/101Tshirt.jpg"
  },

   {
    code:102 ,
    name: "T Shirt",
    desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
    price: ,
    image: "/images/102Tshirt.jpg"
  }

  // {
  //   name: "Meowsalot",
  //   species: "Cat",
  //   favFoods: ["tuna", "catnip", "celery"],
  //   birthYear: 2012,
  //   photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
  // 
];


  

>   boutique.js

function chargerArticles
{
 var items= document.getElementsById('content')
 for (var i = catalog.length - 1; i >= 0; i--) {
  var div = document.createElement("div");
   div.style.width = "100px";
   div.style.height = "100px";
   div.style.background = "red";
   div.style.color = "white";
   // div.innerHTML = "Hello";

   var itemName = document.createElement("h2");
   itemName.classList.add("addCSS"); //also hoow to acess style.css to style h2 (dynamic element) 


  } 
 

}
/*style.css*/
.addClass
{
 font-size: 44px;
 color:red;

}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/data.js"></script>
    <script src="js/codeboutique.js"></script>  

</head>

<body onload="chargerArticles()">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<section id="content" > 
</section>

</body>
</html>
Ayes
  • 141
  • 9
  • 2
    What exactly are you having trouble understanding here? In your first script file, a global variable `catalog` is created - so you can access that inside the second script the same way, you would access _any other_ global variable. – CBroe Jun 09 '20 at 09:19
  • Okay. So I don't have to worry about importing data,js in other js file. Thanks – Ayes Jun 09 '20 at 09:21
  • That is only because you included both scripts inside your html file. You can avoid that using my answer below – DeveloperTK Jun 09 '20 at 09:28

2 Answers2

2

There are syntax errors in your codes. I fixed it, you will not have a problem if you re-examine the codes.

If you create a variable with "var", you can access it from anywhere globally.

// data.js
var catalog = [
    {
      code: 100,
      name: "Learn JS",
      desc: "To make your web paged dynamic",
      price: 150,
      image: "/images/100Tshirt.jpg"
    },
    {
      code:101 ,
      name: "T Shirt",
      desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
      price: 0,
      image: "/images/101Tshirt.jpg"
    },
  
     {
      code:102 ,
      name: "T Shirt",
      desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
      price: 0,
      image: "/images/102Tshirt.jpg"
    }
  
    // {
    //   name: "Meowsalot",
    //   species: "Cat",
    //   favFoods: ["tuna", "catnip", "celery"],
    //   birthYear: 2012,
    //   photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
    // 
  ];
  
  
  // codeboutique.js
  function chargerArticles() {
 var items = document.getElementById("content");
 for (var i = catalog.length - 1; i >= 0; i--) {
  var div = document.createElement("div");
  div.style.width = "100px";
  div.style.height = "100px";
  div.style.background = "red";
  div.style.color = "white";
  // div.innerHTML = "Hello";

  var itemName = document.createElement("h2");
  itemName.classList.add("addCSS"); //also hoow to acess style.css to style h2 (dynamic element)
 }
 catalog.forEach((item) => {
  items.append(item.name);
 });
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <script src="js/data.js"></script>
    <script src="js/codeboutique.js"></script>

</head>

<body onload="chargerArticles()">
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <section id="content">
    </section>

</body>

</html>
emresudo
  • 71
  • 3
  • Thank you. I need li'l more help in assigning external CSS class to dynamically created element (lets say h2 or div). Is it be accessible the same way the global variable are accessible? – Ayes Jun 09 '20 at 09:40
  • 1
    You are welcome, If I understood you correctly, this will help. `catalog.forEach((item) => { let items = document.getElementById("content"); var list = document.createElement("li"); list.innerHTML = item.name; list.setAttribute("class", "class1 class2 class3"); content.appendChild(list); });` – emresudo Jun 09 '20 at 11:40
1

The post, you mentioned explains it well. In order to get data from a different javascript file, you can use the require() function.

In your data.js you need to define the catalog object as a part of the module export like this:

 exports.catalog = [...]; // put your data inside the brackets

Then you can access it inside the boutique.js like this:

 let catalog = require('path/to/data.js').catalog;

 function chargerArticles() {...}

And one tip from me: you would normally load your javascript at the bottom of the body element. This improves loading times, because the style and website are displayed before the javascript is loaded. Just put a siple <script type="text/javascript"> chargerArticles() </script> after the scriptsrc elements.

Hope that helps!

DeveloperTK
  • 112
  • 2
  • 9