将json数据与html页面连接起来答案

【问题标题】：connecting json data with html page将json数据与html页面连接起来
【发布时间】：2018-10-06 12:05:09
【问题描述】：

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

你会在很多地方找到 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"
      }
    ]
  }

【问题讨论】：

您对 Vanilla JavaScript 的尝试程度如何？

标签： javascript html css json

【解决方案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

【讨论】：

注意字符串字面量的使用
是的，我认为这是 ES6 的一个非常酷的新特性，我倾向于尽可能长时间地在任何地方使用它。在这种情况下，我们可以简单地使用点表示法来获取所需的值，例如 json.name 或 json。电话，不使用字符串文字
@NguyễnThanhTú 您的代码在此示例中似乎运行良好。但是当我在整个列表上尝试它时，它给了我一个错误，因为我拥有的 json 列表以 [ 而不是 { 所以如果我试图将“{”放在“[”之前，我不会得到任何结果。但无论如何感谢您的努力，您的代码似乎在简短的示例中运行良好。我想问题是关于我的，我会试着弄清楚并告诉你问题出在哪里！！再次感谢:)

【解决方案2】：

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

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

【讨论】：