Question

我正在尝试使用“ Vanilla Javascript”文件将json中的.json数据连接到html页面，但是我不知道该怎么做。你能帮我么？我将提供html，css代码和我要在html页面中使用的json数据示例。

您会在许多地方的HTML（json数据）中找到。这是我要使用json数据的地方，我必须将其与html页面连接，但我不知道该怎么做！！！

h1 {
  text-align: center;
}

ul {
  list-style: none;
}

.flexcontainer {
  display: flex;
  align-items: center;
}

.container {
  padding-top: 1%;
  padding-bottom: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Employee's Page</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
</head>

<body>
    <h1>Name of the choosen person</h1>
    <div class="container" style="border:1px solid #cecece;">

        <div class="flexcontainer">
            <div>
                <img src="http://placehold.it/350x250" alt="">
            </div>
            <div>
                <ul>
                    <li>
                        <h3>Full name: (Json Data)</h3>
                    </li>
                    <li>
                        <h3>Gender: (Json Data)</h3>
                    </li>
                    <li>
                        <h3>Phone number: (Json Data)</h3>
                    </li>
                    <li>
                        <h3>Company: (Json Data)</h3>
                    </li>
                    <li>
                        <h3>Address: (Json Data)</h3>
                    </li>
                </ul>
            </div>
        </div>

        <div>
            <h3>About employee:</h3>
            <p>(Json Data)</p>
        </div>

        <div>
            <h3>Employee was registered in the system: (Json Data)</h3>
        </div>

        
    </div>
</body>
<script src="./assets/js/json.js"></script>


</html>

我要使用的json数据

json data 
[
  {
    _id: "5af5cf0270d455a211200d4c",
    isActive: true,
    balance: "$3,507.97",
    picture: "http://placehold.it/32x32",
    age: 24,
    eyeColor: "brown",
    name: "Random Name",
    gender: "male",
    company: "AST",
    email: "ast@ast.com",
    phone: "+1 88888888",
    address: "661 Terrace Place, Elliott, Ohio, 9927",
    about:
      "Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\r\n",
    registered: "2014-12-10T07:18:10 +02:00",
    latitude: -84.359436,
    longitude: 156.008804,
    tags: [
      "excepteur",
      "eiusmod",
      "laboris",
      "fugiat",
      "minim",
      "dolor",
      "qui"
    ],
    friends: [
      {
        id: 0,
        name: "Shields Terrell"
      },
      {
        id: 1,
        name: "Hilary Bruce"
      },
      {
        id: 2,
        name: "Lorraine Torres"
      }
    ]
  }

Answer 1

去那里：

const json = [
{
  _id: "5af5cf0270d455a211200d4c",
  isActive: true,
  balance: "$3,507.97",
  picture: "http://placehold.it/32x32",
  age: 24,
  eyeColor: "brown",
  name: "Random Name",
  gender: "male",
  company: "AST",
  email: "ast@ast.com",
  phone: "+1 88888888",
  address: "661 Terrace Place, Elliott, Ohio, 9927",
  about:
    "Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\r\n",
  registered: "2014-12-10T07:18:10 +02:00",
  latitude: -84.359436,
  longitude: 156.008804,
  tags: ["excepteur", "eiusmod", "laboris", "fugiat", "minim", "dolor", "qui"],
  friends: [
    {
      id: 0,
      name: "Shields Terrell"
    },
    {
      id: 1,
      name: "Hilary Bruce"
    },
    {
      id: 2,
      name: "Lorraine Torres"
    }
  ]
},
{
    _id: "5af5cf0254f91fa2d555e1ae",
    isActive: false,
    balance: "$2,219.42",
    picture: "http://placehold.it/32x32",
    age: 27,
    eyeColor: "blue",
    name: "Ryan Evans",
    gender: "male",
    company: "ast",
    email: "ast@ast.com",
    phone: "+1 8888888888",
    address: "595 Foster Avenue, Villarreal, Massachusetts, 4604",
    about:
      "Nostrud exercitation ea enim in consequat voluptate sint et laboris laborum elit nisi veniam. Do consectetur magna eiusmod anim nisi id sint consequat. Amet duis proident nisi excepteur. Reprehenderit non amet occaecat deserunt. Duis voluptate non in ex esse sit nostrud esse fugiat laboris fugiat qui reprehenderit.\r\n",
    registered: "2015-07-08T01:24:50 +03:00",
    latitude: -38.471736,
    longitude: -158.491974,
    tags: ["mollit", "minim", "duis", "anim", "aute", "magna", "ut"],
    friends: [
      {
        id: 0,
        name: "Dina Berger"
      },
      {
        id: 1,
        name: "Carmella Mckinney"
      },
      {
        id: 2,
        name: "Campbell Wooten"
      }
    ]
  }
];

document.getElementById("name").innerHTML = `${json[0].name}`;
document.getElementById("fullname").innerHTML = `${json[0].name}`;
document.getElementById("gender").innerHTML = `${json[0].gender}`;
document.getElementById("phone").innerHTML = `${json[0].phone}`;
document.getElementById("company").innerHTML = `${json[0].company}`;
document.getElementById("address").innerHTML = `${json[0].address}`;
document.getElementById("about").innerHTML = `${json[0].about}`;
document.getElementById("registered").innerHTML = `${json[0].registered}`;

h1 {
  text-align: center;
}

ul {
  list-style: none;
}

.flexcontainer {
	display: flex;
	align-items: center;
}

.container {
	padding-top: 1%;
	padding-bottom: 1%;
	margin-top: 1%;
	margin-bottom: 1%;
}

<html>
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>
<body>
	<div id="app"></div>
	<h1><span id="name"></span></h1>
	<div class="container" style="border:1px solid #cecece;">

		<div class="flexcontainer">
			<div>
				<img src="http://placehold.it/350x250" alt="">
			</div>
			<div>
				<ul>
					<li>
						<h3>Full name: <span id="fullname"></span></h3>
					</li>
					<li>
						<h3>Gender: <span id="gender"></span></h3>
					</li>
					<li>
						<h3>Phone number: <span id="phone"></span></h3>
					</li>
					<li>
						<h3>Company: <span id="company"></span></h3>
					</li>
					<li>
						<h3>Address: <span id="address"></span></h3>
					</li>
				</ul>
			</div>
		</div>

		<div>
			<h3>About employee:</h3>
			<p><span id="about"></span></p>
		</div>

		<div>
			<h3>Employee was registered in the system: <span id="registered"></span></h3>
		</div>
	</div>
</body>

</html>

这是CodeSandbox上的演示：https://codesandbox.io/s/24n50lmlqy

Answer 2

我遇到的类似问题是我使用AJAX来获取数据。在阅读文档对象模型（DOM）和AJAX的概念来解决此问题之前。

DOM- https://www.w3schools.com/js/js_htmldom.asp AJAX- https://www.w3schools.com/xml/ajax_intro.asp

将json数据与html页面连接

2 个答案: