{"id":2001,"date":"2025-09-12T11:59:52","date_gmt":"2025-09-12T11:59:52","guid":{"rendered":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001"},"modified":"2025-09-12T11:59:52","modified_gmt":"2025-09-12T11:59:52","slug":"h2-andmete-lugemine-ja-tootlemine-json-andmevahetusformaadist","status":"publish","type":"page","link":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001","title":{"rendered":"H2: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist"},"content":{"rendered":"\n
\n\n\n\n

\u00dclesanne: <\/strong>Loo Codesandbox-is HTML leht, mis kuvab auto andmeid<\/h4>\n\n\n\n

\u00dclesande eesm\u00e4rk<\/strong> on \u00f5ppida t\u00f6\u00f6tama objektide ja massiividega JavaScriptis, p\u00e4\u00e4sema ligi nende omadustele ja v\u00e4ljastama andmeid HTML-is mallide abil.<\/p>\n\n\n\n

\n\n\n\n
    \n
  1. Esmalt l\u00f5in nimekirja (massiivi) , mis sisaldab objekte koos teabega. See on \u00fche objekti massiiv, mis kirjeldab masinat:<\/li>\n<\/ol>\n\n\n\n
    const myjson = [\n  {\n    Car: {\n      color: "black",\n      "Tinted windows": true,\n      Mark: "Nissan",\n      "Roof cargo": null,\n      Audiosystem: "Radio, Appleplay",\n      Accessories: "navigation system, self drive system, luggage cover,",\n      image:\n        "https:\/\/photoref.carboatservices.fr\/TklTU0FO\/SlVLRQ==\/85e3bcf7b9489f53ef370a0af047a012\/MQ==\/6a317e5a1612b2df627cd32f4929b4d3.png",\n    },\n  },\n];\n\n<\/code><\/pre><\/div>\n\n\n\n
    2. Enne andmete v\u00e4ljastamist peab HTML-dokumendis olema element id=”app”, kuhu ma info paigutan.<\/p>\n\n\n\n
    <div id="app"><\/div><\/code><\/pre><\/div>\n\n\n\n
    3. Seej\u00e4rel kasutasin JavaScripti, et saada element id=”app” ja lisada sellesse HTML-kood, mis sisaldab v\u00e4\u00e4rtusi js-faili objektist.<\/p>\n\n\n\n
    document.getElementById("app").innerHTML = `\n    <div id="json">\n      <h1>Car properties<\/h1>\n      <img src="${myjson[0].Car.image}" alt="Car image" style="max-width:300px; display:block; margin-bottom:10px;">\n      <p>Color: ${myjson[0].Car.color}<\/p>\n      <p>Tinted windows: ${myjson[0].Car["Tinted windows"]}<\/p>\n      <p>Wheels: ${myjson[0].Car.Wheels}<\/p>\n      <p>Roof cargo: ${myjson[0].Car["Roof cargo"]}<\/p>\n      <p>Audiosystem: ${myjson[0].Car.Audiosystem}<\/p>\n      <p>Accessories: ${myjson[0].Car.Accessories}<\/p>\n    <\/div>\n  `;\n\n<\/code><\/pre><\/div>\n\n\n\n
      \n
    • Iga sisestus ${…} on viide objekti omadusele.<\/li>\n\n\n\n
    • myjson[0] on massiivi esimene objekt.<\/li>\n\n\n\n
    • myjson[0].Car on objekt, mis sisaldab auto omadusi.<\/li>\n<\/ul>\n\n\n\n
      Terve kood<\/strong><\/p>\n\n\n\n
      const myjson = [\n  {\n    Car: {\n      color: "black",\n      "Tinted windows": true,\n      Mark: "Nissan",\n      "Roof cargo": null,\n      Audiosystem: "Radio, Appleplay",\n      Accessories: "navigation system, self drive system, luggage cover,",\n      image:\n        "https:\/\/photoref.carboatservices.fr\/TklTU0FO\/SlVLRQ==\/85e3bcf7b9489f53ef370a0af047a012\/MQ==\/6a317e5a1612b2df627cd32f4929b4d3.png",\n    },\n  },\n];\n\ndocument.getElementById("app").innerHTML = `\n    <div id="json">\n      <h1>Car properties<\/h1>\n      <img src="${myjson[0].Car.image}" alt="Car image" style="max-width:300px; display:block; margin-bottom:10px;">\n      <p>Color: ${myjson[0].Car.color}<\/p>\n      <p>Tinted windows: ${myjson[0].Car["Tinted windows"]}<\/p>\n      <p>Wheels: ${myjson[0].Car.Wheels}<\/p>\n      <p>Roof cargo: ${myjson[0].Car["Roof cargo"]}<\/p>\n      <p>Audiosystem: ${myjson[0].Car.Audiosystem}<\/p>\n      <p>Accessories: ${myjson[0].Car.Accessories}<\/p>\n    <\/div>\n  `;\n\n<\/code><\/pre><\/div>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
      \u00dclesanne: Loo Codesandbox-is HTML leht, mis kuvab auto andmeid \u00dclesande eesm\u00e4rk on \u00f5ppida t\u00f6\u00f6tama objektide ja massiividega JavaScriptis, p\u00e4\u00e4sema ligi nende omadustele ja v\u00e4ljastama andmeid HTML-is mallide abil. 2. Enne andmete v\u00e4ljastamist peab HTML-dokumendis olema element id=”app”, kuhu ma info paigutan. 3. Seej\u00e4rel kasutasin JavaScripti, et saada element id=”app” ja lisada sellesse HTML-kood, mis sisaldab […]<\/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-2001","page","type-page","status-publish","hentry"],"yoast_head":"\nH2: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist - Marija Gorbunova portfoolio TARpv23<\/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:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"H2: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist - Marija Gorbunova portfoolio TARpv23\" \/>\n<meta property=\"og:description\" content=\"\u00dclesanne: Loo Codesandbox-is HTML leht, mis kuvab auto andmeid \u00dclesande eesm\u00e4rk on \u00f5ppida t\u00f6\u00f6tama objektide ja massiividega JavaScriptis, p\u00e4\u00e4sema ligi nende omadustele ja v\u00e4ljastama andmeid HTML-is mallide abil. 2. Enne andmete v\u00e4ljastamist peab HTML-dokumendis olema element id=”app”, kuhu ma info paigutan. 3. Seej\u00e4rel kasutasin JavaScripti, et saada element id=”app” ja lisada sellesse HTML-kood, mis sisaldab […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001\" \/>\n<meta property=\"og:site_name\" content=\"Marija Gorbunova portfoolio TARpv23\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marijagorbunova23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/0A6DFBA8-DC8E-407C-9CCB-8B1E33D730E9.png\" \/>\n\t<meta property=\"og:image:width\" content=\"472\" \/>\n\t<meta property=\"og:image:height\" content=\"501\" \/>\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:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/?page_id=2001\",\"url\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/?page_id=2001\",\"name\":\"H2: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist - Marija Gorbunova portfoolio TARpv23\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/?page_id=2001#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/?page_id=2001#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/0A6DFBA8-DC8E-407C-9CCB-8B1E33D730E9.png\",\"datePublished\":\"2025-09-12T11:59:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/?page_id=2001#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/?page_id=2001\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/?page_id=2001#primaryimage\",\"url\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/0A6DFBA8-DC8E-407C-9CCB-8B1E33D730E9.png\",\"contentUrl\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/0A6DFBA8-DC8E-407C-9CCB-8B1E33D730E9.png\",\"width\":472,\"height\":501},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/?page_id=2001#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"H2: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/marijagorbunova23.thkit.ee\\\/wp\\\/\",\"name\":\"Marija Gorbunova portfoolio TARpv23\",\"description\":\"Järgmine WordPress veebileht\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/marijagorbunova23.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: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist - Marija Gorbunova portfoolio TARpv23","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:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001","og_locale":"et_EE","og_type":"article","og_title":"H2: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist - Marija Gorbunova portfoolio TARpv23","og_description":"\u00dclesanne: Loo Codesandbox-is HTML leht, mis kuvab auto andmeid \u00dclesande eesm\u00e4rk on \u00f5ppida t\u00f6\u00f6tama objektide ja massiividega JavaScriptis, p\u00e4\u00e4sema ligi nende omadustele ja v\u00e4ljastama andmeid HTML-is mallide abil. 2. Enne andmete v\u00e4ljastamist peab HTML-dokumendis olema element id=”app”, kuhu ma info paigutan. 3. Seej\u00e4rel kasutasin JavaScripti, et saada element id=”app” ja lisada sellesse HTML-kood, mis sisaldab […]","og_url":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001","og_site_name":"Marija Gorbunova portfoolio TARpv23","og_image":[{"width":472,"height":501,"url":"https:\/\/marijagorbunova23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/0A6DFBA8-DC8E-407C-9CCB-8B1E33D730E9.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:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001","url":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001","name":"H2: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist - Marija Gorbunova portfoolio TARpv23","isPartOf":{"@id":"https:\/\/marijagorbunova23.thkit.ee\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001#primaryimage"},"image":{"@id":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001#primaryimage"},"thumbnailUrl":"https:\/\/marijagorbunova23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/0A6DFBA8-DC8E-407C-9CCB-8B1E33D730E9.png","datePublished":"2025-09-12T11:59:52+00:00","breadcrumb":{"@id":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001#primaryimage","url":"https:\/\/marijagorbunova23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/0A6DFBA8-DC8E-407C-9CCB-8B1E33D730E9.png","contentUrl":"https:\/\/marijagorbunova23.thkit.ee\/wp\/wp-content\/uploads\/2025\/09\/0A6DFBA8-DC8E-407C-9CCB-8B1E33D730E9.png","width":472,"height":501},{"@type":"BreadcrumbList","@id":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?page_id=2001#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/marijagorbunova23.thkit.ee\/wp\/"},{"@type":"ListItem","position":2,"name":"H2: Andmete lugemine ja t\u00f6\u00f6tlemine JSON andmevahetusformaadist"}]},{"@type":"WebSite","@id":"https:\/\/marijagorbunova23.thkit.ee\/wp\/#website","url":"https:\/\/marijagorbunova23.thkit.ee\/wp\/","name":"Marija Gorbunova portfoolio TARpv23","description":"Järgmine WordPress veebileht","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/marijagorbunova23.thkit.ee\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"}]}},"_links":{"self":[{"href":"https:\/\/marijagorbunova23.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/pages\/2001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marijagorbunova23.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marijagorbunova23.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marijagorbunova23.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marijagorbunova23.thkit.ee\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2001"}],"version-history":[{"count":1,"href":"https:\/\/marijagorbunova23.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/pages\/2001\/revisions"}],"predecessor-version":[{"id":2002,"href":"https:\/\/marijagorbunova23.thkit.ee\/wp\/index.php?rest_route=\/wp\/v2\/pages\/2001\/revisions\/2002"}],"wp:attachment":[{"href":"https:\/\/marijagorbunova23.thkit.ee\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}