{"id":2062,"date":"2025-09-12T11:55:13","date_gmt":"2025-09-12T11:55:13","guid":{"rendered":"https:\/\/davidlennuk23.thkit.ee\/wp\/?page_id=2062"},"modified":"2025-09-18T10:21:35","modified_gmt":"2025-09-18T10:21:35","slug":"h2","status":"publish","type":"page","link":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/","title":{"rendered":"H2. JSON andmete n\u00e4itamine JS kaudu"},"content":{"rendered":"\n

index.mjs<\/h2>\n\n\n
\nimport ".\/styles.css";\n\n\/\/masiiv\nconst car = [\n  {\n    Name: "HONDA",\n    Color: "blue",\n    "Tinted windows": false,\n    Wheel: 4,\n    "Roof cargo": null,\n    Entertainment: [\n      "FM radio",\n      "MP3, MP4 and MKV player",\n      "harman\/karbon speakers",\n    ],\n    Accessories: ["satnav", "cruise control"],\n  },\n  {\n    Name: "Merc",\n    Color: "black",\n    "Tinted windows": false,\n    Wheel: 4,\n    "Roof cargo": null,\n    Entertainment: [\n      "FM radio",\n      "MP3, MP4 and MKV player",\n      "harman\/karbon speakers",\n    ],\n    Accessories: ["satnav", "cruise control"],\n  },\n  {\n    Name: "Audi",\n    Color: "green",\n    "Tinted windows": true,\n    Wheel: 4,\n    "Roof cargo": null,\n    Entertainment: [\n      "FM radio",\n      "MP3, MP4 and MKV player",\n      "harman\/karbon speakers",\n    ],\n    Accessories: ["satnav", "cruise control"],\n  },\n];\n\n\/\/n\u00e4itame html tableina\ndocument.getElementById("app").innerHTML = `\n<div>\n<h1>Car properties<\/h1>\n<table>\n    <tr>\n        <th>Name<\/th>\n        <th>Color<\/th>\n        <th>Tinted Windows<\/th>\n        <th>Wheels<\/th>\n        <th>Roof cargo<\/th>\n        <th>Entertainment<\/th>\n        <th>Accessories<\/th>\n    <\/tr>\n    <tbody>\n    ${car.map(\n      (car) => `\n        <tr>\n        <td>${car.Name}<\/td>\n        <td>${car.Color}<\/td>\n        <td>${car["Tinted windows"] ? "Yes" : "No"}<\/td>\n        <td>${car.Wheel}<\/td>\n        <td>${car["Roof cargo"] || "None"}<\/td>\n        <td>${car.Entertainment.map((e) => "\ud83e\udd21" + e).join(", ")}<\/td>\n        <td>${car.Accessories.map((e) => "\ud83d\ude0e" + e).join(", ")}<\/td>\n        <\/tr>\n        `\n    )}\n    <\/tbody>\n<\/table>\n<\/div>\n`;\n<\/pre><\/div>\n\n\n
style.css<\/h2>\n\n\n
\nbody {\n  font-family: Arial, sans-serif;\n  background-color: #f4f4f4;\n  margin: 0;\n  padding: 0;\n}\n\ndiv {\n  width: 80%;\n  margin: 20px auto;\n  padding: 20px;\n  background-color: #fff;\n  border-radius: 8px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n  text-align: center;\n  color: #333;\n  margin-bottom: 20px;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  margin-top: 10px;\n}\n\nth,\ntd {\n  padding: 12px 15px;\n  text-align: left;\n  border: 1px solid #ddd;\n}\n\nth {\n  background-color: #470692;\n  color: white;\n  font-weight: bold;\n  text-transform: uppercase;\n}\n\ntr:hover {\n  background-color: #f1f1f1;\n}\n\ntr:nth-child(even) {\n  background-color: #f9f9f9;\n}\n\ntr:nth-child(odd) {\n  background-color: #ffffff;\n}\n\ntable {\n  margin-bottom: 20px;\n}\ntd {\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Kokkuv\u00f5tte:<\/h2>\n\n\n\n
Auto andmed on JSON masiivis mida p\u00e4rast me kuvame html tabelina JS abil.<\/p>\n","protected":false},"excerpt":{"rendered":"
index.mjs style.css Kokkuv\u00f5tte: Auto andmed on JSON masiivis mida p\u00e4rast me kuvame html tabelina JS abil.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2062","page","type-page","status-publish","hentry","entry"],"yoast_head":"\nH2. JSON andmete n\u00e4itamine JS kaudu - David Lennuk õpimapp | portfoolio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"H2. JSON andmete n\u00e4itamine JS kaudu - David Lennuk õpimapp | portfoolio\" \/>\n<meta property=\"og:description\" content=\"index.mjs style.css Kokkuv\u00f5tte: Auto andmed on JSON masiivis mida p\u00e4rast me kuvame html tabelina JS abil.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/\" \/>\n<meta property=\"og:site_name\" content=\"David Lennuk õpimapp | portfoolio\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-18T10:21:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/DEB5B5CA-109D-43FA-BC11-AA31742564F4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1340\" \/>\n\t<meta property=\"og:image:height\" content=\"472\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/h2\\\/\",\"url\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/h2\\\/\",\"name\":\"H2. JSON andmete n\u00e4itamine JS kaudu - David Lennuk õpimapp | portfoolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/h2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/h2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/DEB5B5CA-109D-43FA-BC11-AA31742564F4-1024x361.png\",\"datePublished\":\"2025-09-12T11:55:13+00:00\",\"dateModified\":\"2025-09-18T10:21:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/h2\\\/#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/h2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/h2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/DEB5B5CA-109D-43FA-BC11-AA31742564F4.png\",\"contentUrl\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/DEB5B5CA-109D-43FA-BC11-AA31742564F4.png\",\"width\":1340,\"height\":472},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/h2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"H2. JSON andmete n\u00e4itamine JS kaudu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/\",\"name\":\"David Lennuk õpimapp | portfoolio\",\"description\":\"Noorem Tarkvaraarendaja eriala\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/davidlennuk23.thkit.ee\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"et\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"H2. JSON andmete n\u00e4itamine JS kaudu - David Lennuk õpimapp | portfoolio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/","og_locale":"et_EE","og_type":"article","og_title":"H2. JSON andmete n\u00e4itamine JS kaudu - David Lennuk õpimapp | portfoolio","og_description":"index.mjs style.css Kokkuv\u00f5tte: Auto andmed on JSON masiivis mida p\u00e4rast me kuvame html tabelina JS abil.","og_url":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/","og_site_name":"David Lennuk õpimapp | portfoolio","article_modified_time":"2025-09-18T10:21:35+00:00","og_image":[{"width":1340,"height":472,"url":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/DEB5B5CA-109D-43FA-BC11-AA31742564F4.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/","url":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/","name":"H2. JSON andmete n\u00e4itamine JS kaudu - David Lennuk õpimapp | portfoolio","isPartOf":{"@id":"https:\/\/davidlennuk23.thkit.ee\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/#primaryimage"},"image":{"@id":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/#primaryimage"},"thumbnailUrl":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/DEB5B5CA-109D-43FA-BC11-AA31742564F4-1024x361.png","datePublished":"2025-09-12T11:55:13+00:00","dateModified":"2025-09-18T10:21:35+00:00","breadcrumb":{"@id":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/#primaryimage","url":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/DEB5B5CA-109D-43FA-BC11-AA31742564F4.png","contentUrl":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/DEB5B5CA-109D-43FA-BC11-AA31742564F4.png","width":1340,"height":472},{"@type":"BreadcrumbList","@id":"https:\/\/davidlennuk23.thkit.ee\/wp\/h2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/davidlennuk23.thkit.ee\/wp\/"},{"@type":"ListItem","position":2,"name":"H2. JSON andmete n\u00e4itamine JS kaudu"}]},{"@type":"WebSite","@id":"https:\/\/davidlennuk23.thkit.ee\/wp\/#website","url":"https:\/\/davidlennuk23.thkit.ee\/wp\/","name":"David Lennuk õpimapp | portfoolio","description":"Noorem Tarkvaraarendaja eriala","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/davidlennuk23.thkit.ee\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"}]}},"_links":{"self":[{"href":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/2062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-json\/wp\/v2\/comments?post=2062"}],"version-history":[{"count":6,"href":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/2062\/revisions"}],"predecessor-version":[{"id":2148,"href":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/2062\/revisions\/2148"}],"wp:attachment":[{"href":"https:\/\/davidlennuk23.thkit.ee\/wp\/wp-json\/wp\/v2\/media?parent=2062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}