时间戳

首页 > 解决方案 > 如何从一个 (1.js) 文件中获取 json 格式数组到另一个 js 文件(2.js) 以最终在 html 中显示数据？

javascript - 如何从一个 (1.js) 文件中获取 json 格式数组到另一个 js 文件(2.js) 以最终在 html 中显示数据？

问题描述

我是 Java 脚本的新手，在一项作业中，我被指示创建 2 个JS文件，然后在 HTML 中动态显示数据。一个 JS 文件data.js文件有一个array of objects（比如说项目表），另一个 JS 文件有function which loads those items，创建 HTML 元素并在 HTML 页面上显示项目（目录）。

我找到了相关的帖子 [here]（如何在另一个 JavaScript 文件中包含 JavaScript 文件？ cript-file-in-another-java script-file）。但是我仍然无法理解how to access display data from 1 JS filewhileloadfunction()位于另一个 JS 文件. 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");` 请在这方面帮助我。谢谢你。

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

标签： javascripthtmlcss

解决方案

您的代码中有语法错误。我修复了它，如果您重新检查代码，您将不会有问题。

如果您使用“var”创建变量，则可以从全球任何地方访问它。

// 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>

推荐阅读