Syntax error How to read data from JSON array using JavaScript?

How to read data from JSON array using JavaScript?

Following is the code to read data from JSON array using JavaScript −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample,.result {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>Read data from JSON array using JavaScript</h1>
<div class="sample">
[{"name":"Rohan","age":22}, {"name":"Shawn","age":12} ,{"name":"Michael","age":21}]
</div>
<div class="result" style="color: green;"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to read data from above JSON array</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let resultEle = document.querySelector(".result");
   let parsedJson = JSON.parse(sampleEle.innerHTML);
   document.querySelector(".Btn").addEventListener("click", () => {
      parsedJson.forEach((item) => {
         resultEle.innerHTML += "Name = " + item.name + "";
         resultEle.innerHTML += "Age = " + item.age + "";
      });
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

Updated on: 2020-07-18T07:34:17+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements