connecting json data with html page

Question

I'm trying to connect some of .json data that I have in json using "Vanilla Javascript" file to the html page, but I have no idea how to do it. can you please help me ? I will give the html, css code and ` example of the json data that i'm trying to use in the html page.

you will find in the HTML (json data) in many places. this is where I want to use the json data that I have to connect it with my html page but I have no idea how to do that !!!

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>

the json data that I want to use

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"
      }
    ]
  }

How far did you try with Vanilla JavaScript?

Supun Abesekara
– Supun Abesekara

2018-10-06 03:08:46 +00:00
Commented Oct 6, 2018 at 3:08 — Supun Abesekara
– Supun Abesekara, Commented Oct 6, 2018 at 3:08

Tu Nguyen · Accepted Answer · 2018-10-06 04:05:09Z

There you go:

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>

This is the demo on CodeSandbox: https://codesandbox.io/s/24n50lmlqy

yeah, I think it's a pretty cool new feature of ES6 and I tend to use it anywhere as long as possible. In this case, we could simply use dot notation to get the desired value, like json.name or json. phone, without using string literal
@NguyễnThanhTú your code seems to work perfectly in this example. but when I try it on the whole list it gives me an error because the list of json that I have starts with [ not with { so if I tried to put "{" before "[" I don't get any results. but anyway thanks for the effort, your code seems to be working fine with the short example. I guess the problem is about me, I will try to figure it out and tell you what was the problem!! thanks once again :)

Varun_Ambhire · Accepted Answer · 2018-10-06 03:05:12Z

0

The similar problem i has face i used AJAX to fetch data. before that read concept of Document Object Model(DOM) and AJAX to solve this problem.

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

answered Oct 6, 2018 at 3:05

Varun_Ambhire

334 bronze badges

Collectives™ on Stack Overflow

connecting json data with html page

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related