Created a table that shows JSON values

eaf68cfe · Sander Kvenild · a2d618b7 · eaf68cfe · eaf68cfe
Commit eaf68cfe authored Feb 22, 2022 by Sander Kvenild
--- a/js-ov15-oop5-sander-kvenild/index.html
+++ b/js-ov15-oop5-sander-kvenild/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Oblig 5</title>
+    <style>
+        table, th, td{
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+    <h1>Oblig 5</h1>
+    <table>
+        <tbody id="peaks">
+            <tr>
+                <th>Fylke</th>
+                <th>Navn</th>
+                <th>Høyde</th>
+            </tr>
+        </tbody>
+    </table>
+
+    <script src="index.js"></script>
+</body>
+</html>
\ No newline at end of file
--- a/js-ov15-oop5-sander-kvenild/index.js
+++ b/js-ov15-oop5-sander-kvenild/index.js
+let peaks = document.getElementById("peaks");
+
+fetch('fylkestopper.json')
+    .then(response => response.json())
+    .then(json => {
+        for (const peak of json) {
+            let fylke = document.createElement('td');
+            fylke.innerText = peak.fylke;
+
+            let navn = document.createElement('td');
+            navn.innerText = peak.navn;
+
+            let height = document.createElement('td');
+            height.innerText = `${peak.høyde} m`;
+
+            let row = document.createElement('tr');
+            row.appendChild(fylke);
+            row.appendChild(navn);
+            row.appendChild(height);
+
+            peaks.appendChild(row);
+        }
+    });
\ No newline at end of file