{"id":892,"date":"2023-03-14T09:15:28","date_gmt":"2023-03-14T09:15:28","guid":{"rendered":"https:\/\/thoth.dk\/?page_id=892"},"modified":"2025-10-19T06:18:00","modified_gmt":"2025-10-19T06:18:00","slug":"892-2","status":"publish","type":"page","link":"https:\/\/thoth.dk\/index.php\/892-2\/","title":{"rendered":"JSON \/ WP Sample"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Here&#8217;s the sample of a JSON-list looped out by JavaScript. In this way you can use and reuse your coded objects. Please note that the links to the images point to the media files in the WordPress installation. You can get the links to the images in the Dashboard.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Code<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"result\"&gt;&lt;\/div&gt;\n\n&lt;script&gt;\n \n let bands = {\n  \"List\": &#91;\n    {\n      \"Band\": \"The Kinks\",\n      \"Stage\": \"Blue\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png\"\n    },\n    {\n      \"Band\": \"Velvet Underground\",\n      \"Stage\": \"Orange\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/punk.jpeg\"\n    },\n    {\n      \"Band\": \"Aura\",\n      \"Stage\": \"Green\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3.png\"\n    },\n    {\n      \"Band\": \"Ozzy Osborne\",\n      \"Stage\": \"Black\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\"\n    },\n    {\n      \"Band\": \"Mozart Rock Experience\",\n      \"Stage\": \"Pink\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\"\n    },\n    {\n      \"Band\": \"Sigurds Ulvetime\",\n      \"Stage\": \"Blue\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\"\n    },\n    {\n      \"Band\": \"Pink Floyd\",\n      \"Stage\": \"Orange\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\"\n    }\n  ]\n}\n\nfor ( let i = 0; i&lt;bands.List.length; i++ ){\n    result.innerHTML += \"&lt;div&gt;\" \n    result.innerHTML +=  \"&lt;img src='\" + bands.List&#91;i].Image + \"'class='respImg' alt='Band image'&gt;\" \n\tresult.innerHTML += bands.List&#91;i].Band + \"&lt;br&gt;\" \n    result.innerHTML += \"&lt;\/div&gt;\" \n\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Result<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Stage: Orange<\/p>\n\n\n\n<div id=\"result\"><\/div>\n\n<script>\n \n let bands = {\n  \"List\": [\n    {\n      \"Band\": \"The Kinks\",\n      \"Stage\": \"Blue\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png\"\n    },\n    {\n      \"Band\": \"Velvet Underground\",\n      \"Stage\": \"Orange\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/punk.jpeg\"\n    },\n    {\n      \"Band\": \"Aura\",\n      \"Stage\": \"Green\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3.png\"\n    },\n    {\n      \"Band\": \"Ozzy Osborne\",\n      \"Stage\": \"Black\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\"\n    },\n    {\n      \"Band\": \"Mozart Rock Experience\",\n      \"Stage\": \"Pink\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\"\n    },\n    {\n      \"Band\": \"Sigurds Ulvetime\",\n      \"Stage\": \"Blue\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\"\n    },\n    {\n      \"Band\": \"Pink Floyd\",\n      \"Stage\": \"Orange\",\n      \"Image\": \"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\"\n    }\n  ]\n}\n\nfor ( let i = 0; i<bands.List.length; i++ ){\n    result.innerHTML += \"<div>\" \n    result.innerHTML +=  \"<img src='\" + bands.List[i].Image + \"'class='respImg' alt='Band image'>\" \n\tresult.innerHTML += bands.List[i].Band + \"<br>\" \n    result.innerHTML += \"<\/div>\" \n\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s the sample of a JSON-list looped out by JavaScript. In this way you can use and reuse your coded objects. Please note that the links to the images point to the media files in the WordPress installation. You can get the links to the images in the Dashboard. The Code Result Stage: Orange<\/p>\n","protected":false},"author":1,"featured_media":968,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-892","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JSON \/ WP Sample - Wordpress og WooCommerce<\/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:\/\/thoth.dk\/index.php\/892-2\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JSON \/ WP Sample - Wordpress og WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Here&#8217;s the sample of a JSON-list looped out by JavaScript. In this way you can use and reuse your coded objects. Please note that the links to the images point to the media files in the WordPress installation. You can get the links to the images in the Dashboard. The Code Result Stage: Orange\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thoth.dk\/index.php\/892-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress og WooCommerce\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-19T06:18:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\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=\"Estimeret l\u00e6setid\" \/>\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:\\\/\\\/thoth.dk\\\/index.php\\\/892-2\\\/\",\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/892-2\\\/\",\"name\":\"JSON \\\/ WP Sample - Wordpress og WooCommerce\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/892-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/892-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/image-4.png\",\"datePublished\":\"2023-03-14T09:15:28+00:00\",\"dateModified\":\"2025-10-19T06:18:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/892-2\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/892-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/892-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/image-4.png\",\"contentUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/image-4.png\",\"width\":512,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/892-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thoth.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSON \\\/ WP Sample\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\",\"url\":\"https:\\\/\\\/thoth.dk\\\/\",\"name\":\"Wordpress og WooCommerce\",\"description\":\"Syv kreative dage med WordPress og WooCommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thoth.dk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JSON \/ WP Sample - Wordpress og WooCommerce","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:\/\/thoth.dk\/index.php\/892-2\/","og_locale":"da_DK","og_type":"article","og_title":"JSON \/ WP Sample - Wordpress og WooCommerce","og_description":"Here&#8217;s the sample of a JSON-list looped out by JavaScript. In this way you can use and reuse your coded objects. Please note that the links to the images point to the media files in the WordPress installation. You can get the links to the images in the Dashboard. The Code Result Stage: Orange","og_url":"https:\/\/thoth.dk\/index.php\/892-2\/","og_site_name":"Wordpress og WooCommerce","article_modified_time":"2025-10-19T06:18:00+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimeret l\u00e6setid":"1 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thoth.dk\/index.php\/892-2\/","url":"https:\/\/thoth.dk\/index.php\/892-2\/","name":"JSON \/ WP Sample - Wordpress og WooCommerce","isPartOf":{"@id":"https:\/\/thoth.dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/892-2\/#primaryimage"},"image":{"@id":"https:\/\/thoth.dk\/index.php\/892-2\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png","datePublished":"2023-03-14T09:15:28+00:00","dateModified":"2025-10-19T06:18:00+00:00","breadcrumb":{"@id":"https:\/\/thoth.dk\/index.php\/892-2\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thoth.dk\/index.php\/892-2\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thoth.dk\/index.php\/892-2\/#primaryimage","url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png","contentUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-4.png","width":512,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/thoth.dk\/index.php\/892-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thoth.dk\/"},{"@type":"ListItem","position":2,"name":"JSON \/ WP Sample"}]},{"@type":"WebSite","@id":"https:\/\/thoth.dk\/#website","url":"https:\/\/thoth.dk\/","name":"Wordpress og WooCommerce","description":"Syv kreative dage med WordPress og WooCommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thoth.dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"}]}},"_links":{"self":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages\/892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/comments?post=892"}],"version-history":[{"count":11,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages\/892\/revisions"}],"predecessor-version":[{"id":4476,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages\/892\/revisions\/4476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media\/968"}],"wp:attachment":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media?parent=892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}