Ex No: 12 CONVERT LIST TO JSON
Aim: To write a JavaScript program to convert list to JSON object.
Algorithm
Step1: Create a folder “Ex12” to place all the HTML files and Image files.
Step2: Create two HTML file “index.html” and “marksheet.html”.
Step3: Add JavaScript code to get marks for each subject and convert it into Key-Value pair list.
Step4: Using JSON.stringify() method convert the list into JSON object and send it to the “marksheet.html” page.
Step5: In marksheet.html using urlParams.get() method get the JSON object.
Step6: Parse the JSON object and create Table body and display the Mark Sheet.
Source Code

index.html


<!DOCTYPE html>
<html>
   <head>
      <title>JSON Object</title>   
   <style>
     header {
      text-align:center;
      height: 100px;
      background-color: Lavender;
      padding: 10px;
      border-radius: 10px 10px 0px 0px;
     }
     footer {
      text-align:center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: Lavender;
      padding: 10px;
      margin-top: 10px;
      border-radius: 10px;
     }
   </style>
   <script type="text/javascript">
      let subjList = ["CNS", "CSS", "BeT", "RDBMS", "JS Practical", "PHP Prog Practical", "RDBMS Practical"];
      let subjMarks={};
      let JSONobj = null;
      function getMarks()
      {
         let i;
         let len = subjList.length;
         for(i=0;i<len-1;i++)
         {
            subjMarks[subjList[i]] = prompt("Enter Marks "+subjList[i]);
         }
         JSONobj = JSON.stringify(subjMarks);
      }
      
      function genMarkSheet()
      {
         window.location.href="marksheet.html?obj="+JSONobj;
      }      
   </script>
   </head>
   <body>      
      <header>
         <h1>Convert List to JSON</h1>
      </header>   
      <hr>
      <input type="button" value="Get Marks" onclick="getMarks()"><br><br>
      <input type="button" value="Generate Mark Sheet" onclick="genMarkSheet()">
      <footer>
         Developed by K Anbarasan
      </footer>
   </body>
</html>

home.html


<!DOCTYPE html>
<html>
   <head>
      <title>Mark Sheet</title>   
   <style>
     header {
      text-align:center;
      height: 100px;
      background-color: Wheat;
      padding: 10px;
      border-radius: 10px 10px 0px 0px;
     }
     footer {
      text-align:center;
      font-size: 12px;
      height: 50px;
      line-height: 50px;
      background-color: Wheat;
      padding: 10px;
      margin-top: 10px;
      border-radius: 10px;
     }
     table, td, th{
      border: 1px solid;
      border-collapse: collapse;
     }
   </style>
   </head>
   <body>      
      <header>
         <h1>Mark Sheet</h1>
      </header>   
      <hr>
      <table>
        <thead>
         <tr>
            <th colspan=3>Department of Web Desinging, IV Sem Mark Sheet</th>
         </tr>
         <tr>
            <th>S.No</th>
            <th>Subject</th>
            <th>Marks</th>
         </tr>
        </thead>
        <tbody id="tblMarks">
        </tbody>
      </table>
      <footer>
         Developed by K Anbarasan
      </footer>
      <script type="text/javascript">
         const urlParams = new URLSearchParams(window.location.search);
         const JSONobj = urlParams.get('obj');
         let tbody = "";
         let i;
         if(JSONobj!=null)
         {
            document.getElementById("tblMarks").innerHTML="";
            data = JSON.parse(JSONobj);
            let subject = Object.keys(data);
            let mark = Object.values(data);
            
            for(i=0;i<subject.length;i++)
            {
               tbody += "<tr><td>"+(i+1)+"</td><td>"+subject[i]+"</td><td>"+mark[i]+"</td></tr>";
            }
            document.getElementById("tblMarks").innerHTML=tbody;
         }
      </script>
   </body>
</html>
Result: Thus JavaScript Code is written to convert a list to JSON object and successfully implemented.