Syntax error How to convert array of comma separated strings to array of objects?

How to convert array of comma separated strings to array of objects?



Following is the code to convert array of comma separated strings to array of objects −

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;
   }
   .result,.sample {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
   .result {
      color: red;
   }
</style>
</head>
<body>
<h1>Convert array of comma separated strings to array of object</h1>
<div class="sample"></div>
<br />
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to convert the above array of strings to objects</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   let arr = [
      '{ "name":"Rohan", "age":12}',
      '{ "name":"Mohit", "age":22}',
      '{ "name":"Shawn", "age":18}',
      '{ "name":"Michael", "age":19}',
   ];
   sampleEle.innerHTML = arr;
   BtnEle.addEventListener("click", () => {
      arr.forEach((item, index) => {
         arr[index] = JSON.parse(item);
      });
      arr.forEach((item) => {
         resEle.innerHTML += "Name = " + item.name + " : Age = " + item.age + "<br>";
      });
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

Updated on: 2020-07-18T08:53:17+05:30

347 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements