Подключение данных json к странице html

Я пытаюсь подключить некоторые данные .json, которые у меня есть в json, с помощью файла "Vanilla Javascript" к странице html, но я понятия не имею, как это сделать. не могли бы вы мне помочь ? Я приведу код html, css и пример данных json, которые я пытаюсь использовать на странице html.

вы найдете в 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: "[email protected]",
    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"
      }
    ]
  }

Насколько далеко вы пробовали использовать ванильный JavaScript?

— 06.10.2018 05:08

javascript html css json

06.10.2018 04:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

У меня возникла аналогичная проблема, я использовал AJAX для извлечения данных. перед этим ознакомьтесь с концепцией Объектная модель документа (DOM) и AJAX, чтобы решить эту проблему.

ДОМ- https://www.w3schools.com/js/js_htmldom.asp AJAX- https://www.w3schools.com/xml/ajax_intro.asp

06.10.2018 05:05

Ответ принят как подходящий

Вот и все:

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: "[email protected]",
  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: "[email protected]",
    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

Обратите внимание на использование строковые литералы

— 06.10.2018 05:16

да, я думаю, что это довольно крутая новая функция ES6, и я стараюсь использовать ее где угодно как можно дольше. В этом случае мы могли бы просто использовать точечную нотацию для получения желаемого значения, например json.name или json. телефон без строкового литерала

— 06.10.2018 05:22

@ NguyễnThanhTú, кажется, ваш код отлично работает в этом примере. но когда я пробую использовать его для всего списка, у меня возникает ошибка, потому что список json, который у меня есть, начинается с [не с {, поэтому, если я попытаюсь поставить "{" перед "[", я не получу никаких результатов. но в любом случае спасибо за усилия, ваш код, похоже, отлично работает с коротким примером. Думаю, проблема во мне, я постараюсь разобраться и рассказать вам, в чем проблема !! еще раз спасибо :)

— 06.10.2018 05:28

06.10.2018 05:07