Advertisement
Grossos

fromJSONtoHTMLTable

Jan 18th, 2024
828
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.16 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FromJSONToHTMLTable</title>
  6.     <style>
  7.         table,th{
  8.             border: groove;
  9.             border-collapse: collapse;
  10.         }
  11.         td{
  12.             border: 1px solid black;
  13.         }
  14.         td,th{
  15.             padding: 5px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="wrapper">
  21.     </div>
  22.     <script>
  23.         function fromJSONToHTMLTable(input){
  24.            
  25.             let parsed = JSON.parse(input);
  26.          
  27.             let tableHtml = '';
  28.             tableHtml += '<table> <tr><th>Name</th><th>Score</th></tr>';
  29.  
  30.                 for (let prop in parsed) {
  31.  
  32.                     tableHtml += `<tr><td>${parsed[prop].Name}</td><td>${parsed[prop].Price}</td></tr>`;
  33.                 }
  34.                 tableHtml += '</table>';
  35.                
  36.             return tableHtml;
  37.         }
  38.    
  39.         window.onload = function(){
  40.             let container = document.getElementById('wrapper');
  41.             container.innerHTML = fromJSONToHTMLTable(['[{"Name":"Stamat","Price":5.5},{"Name":"Rumen","Price":6}]']);
  42.         };
  43.  
  44.     </script>
  45. </body>
  46. </html>
  47.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement