{"id":940,"date":"2023-03-13T13:29:17","date_gmt":"2023-03-13T13:29:17","guid":{"rendered":"https:\/\/thoth.dk\/?page_id=940"},"modified":"2025-02-13T09:25:49","modified_gmt":"2025-02-13T09:25:49","slug":"json-band-list","status":"publish","type":"page","link":"https:\/\/thoth.dk\/index.php\/json-band-list\/","title":{"rendered":"JSON Band List"},"content":{"rendered":"\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a68a9b2363ff&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a68a9b2363ff\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg\" alt=\"\" class=\"wp-image-941\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band.jpeg 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band-300x300.jpeg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band-150x150.jpeg 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band-450x450.jpeg 450w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/manga-band-100x100.jpeg 100w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Punk band in anim\u00e9 style. <br>Image by <a rel=\"noreferrer noopener\" href=\"https:\/\/stablediffusionweb.com\/#demo\" target=\"_blank\">Stable Diffusion<\/a>.<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Resources:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/codebeautify.org\/excel-to-json\" target=\"_blank\" rel=\"noreferrer noopener\">Convert Excell to JSON<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/asathoor\/1st-sem-int-2022\/tree\/main\/JSON-data-exchange\" target=\"_blank\" rel=\"noreferrer noopener\">Per&#8217;s JSON script on Github<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exercise<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a68a9b236ab7&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a68a9b236ab7\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"249\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/Skaermbillede-2023-03-13-kl.-14.31.15-1024x249.png\" alt=\"\" class=\"wp-image-951\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/Skaermbillede-2023-03-13-kl.-14.31.15-1024x249.png 1024w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/Skaermbillede-2023-03-13-kl.-14.31.15-300x73.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/Skaermbillede-2023-03-13-kl.-14.31.15-768x187.png 768w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/Skaermbillede-2023-03-13-kl.-14.31.15-1536x374.png 1536w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/Skaermbillede-2023-03-13-kl.-14.31.15-600x146.png 600w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/Skaermbillede-2023-03-13-kl.-14.31.15.png 1774w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Excel Data<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Enter some band names to a Spreadsheet. Here in Excel. Then convert the Excel to <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/whatis\/whatis_json.asp\" target=\"_blank\">JSON<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/codebeautify.org\/excel-to-json\"><img loading=\"lazy\" decoding=\"async\" width=\"594\" height=\"464\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-2.png\" alt=\"\" class=\"wp-image-949\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-2.png 594w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-2-300x234.png 300w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" \/><\/a><figcaption class=\"wp-element-caption\">Excel to JSON. Load the file.<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a list of at least 5 real or imaginary bands in the form of a <em>spreadsheet<\/em> (Excell \/ Libre Office).<\/li>\n\n\n\n<li>If you need a JSON <em>array<\/em>, remember to mark i up like this:\u000b<br><em>[ \u2018Track One\u2019 , \u2018Track Two\u2019 , \u2018Track Nine\u2019 ]<\/em><\/li>\n\n\n\n<li>Images must be links to images in your media library on your WordPress.<\/li>\n\n\n\n<li>Convert the <a href=\"https:\/\/codebeautify.org\/excel-to-json\" target=\"_blank\" rel=\"noreferrer noopener\">spreadsheet to JSON<\/a>. Download or copy the code.<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a68a9b236f21&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a68a9b236f21\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band.jpeg\" alt=\"\" class=\"wp-image-944\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band.jpeg 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band-300x300.jpeg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band-150x150.jpeg 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band-450x450.jpeg 450w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/band-100x100.jpeg 100w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Yet another band by Stable Diffusion<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Modify the script so that the band list &#8211; or parts of it &#8211; will be displayed on your WP page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code: as JsFiddle<\/h3>\n\n\n\n<div><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/petj\/5sk8a4ud\/14\/embedded\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest=\"\" frameborder=\"0\"><\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Now Create Your Band List <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The bands object could have the following structure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Stage<\/li>\n\n\n\n<li>Name of the band.<\/li>\n\n\n\n<li>Picture \/ logo for the band (URI)<\/li>\n\n\n\n<li>Short description<\/li>\n\n\n\n<li>Tracks (as a list)<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Add the code to WordPress<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"result\"&gt;&lt;\/div&gt;\n&lt;script&gt;\nlet bands = {\n  \"Ark1\": &#91;\n    {\n      \"Band\": \"The Kinks\",\n      \"Stage\": \"Blue\",\n      \"Image\": \"path-to-image-here.png\"\n    },\n    {\n      \"Band\": \"Velvet Underground\",\n      \"Stage\": \"Orange\",\n      \"Image\": \"path-to-image-here.png\"\n    },\n    {\n      \"Band\": \"Aura\",\n      \"Stage\": \"Green\",\n      \"Image\": \"path-to-image-here.png\"\n    }\n  ]\n}\n\n\/\/ loop out the list\nfor ( let i = 0; i&lt;bands.Ark1.length; i++ ){\n\tresult.innerHTML += bands.Ark1&#91;i].Band + \"&lt;br&gt;\"\n}\n\n&lt;\/script&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">And here is the result<\/h3>\n\n\n\n<div id=\"result\"><\/div>\n<script>\nlet bands = {\n  \"Ark1\": [\n    {\n      \"Band\": \"The Kinks\",\n      \"Stage\": \"Blue\",\n      \"Image\": \"path-to-image-here.png\"\n    },\n    {\n      \"Band\": \"Velvet Underground\",\n      \"Stage\": \"Orange\",\n      \"Image\": \"path-to-image-here.png\"\n    },\n    {\n      \"Band\": \"Aura\",\n      \"Stage\": \"Green\",\n      \"Image\": \"path-to-image-here.png\"\n    }\n  ]\n}\n\n\/\/ loop out the list\nfor ( let i = 0; i<bands.Ark1.length; i++ ){\n\tresult.innerHTML += bands.Ark1[i].Band + \"<br>\"\n}\n\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">By thine own ingenium continue &#8230;<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a68a9b2377f5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a68a9b2377f5\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/punk.jpeg\" alt=\"\" class=\"wp-image-954\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/punk.jpeg 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/punk-300x300.jpeg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/punk-150x150.jpeg 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/punk-450x450.jpeg 450w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/punk-100x100.jpeg 100w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Stable Difusion: A punk band in violet colors manga style<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now add real images. You can get the image URI in the WP Media Library. Also add famous songs by each band. Loop them out &#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fetch(  url\/file  )<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a68a9b237d56&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a68a9b237d56\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"768\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3.png\" alt=\"\" class=\"wp-image-961\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3.png 768w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-300x300.png 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-150x150.png 150w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-450x450.png 450w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-600x600.png 600w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/03\/image-3-100x100.png 100w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Stable Difusion: &#8220;a javascript fetch( url ) response in manga style&#8221;<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Probably it&#8217;s more convenient if your data is served as JSON from your server. Create a directory somwhere convenient for the JSON. In this sample we use the RAW data from a file on Github.<\/p>\n\n\n\n<p><script async=\"\" src=\"\/\/jsfiddle.net\/petj\/jkn1f7dL\/42\/embed\/\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Google Sheets as a JSON endpoint<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A spreadsheet may be used as a JSON &#8220;database&#8221;. Read <a rel=\"noreferrer noopener\" href=\"https:\/\/www.freecodecamp.org\/news\/cjn-google-sheets-as-json-endpoint\/\" target=\"_blank\">this article<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Working Code Link<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">See this <a href=\"https:\/\/gist.github.com\/asathoor\/57a9b37e6598b4a450520a2e856be946\" target=\"_blank\" rel=\"noreferrer noopener\">Gist on Github<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Resources: Exercise Enter some band names to a Spreadsheet. Here in Excel. Then convert the Excel to JSON: Modify the script so that the band list &#8211; or parts of it &#8211; will be displayed on your WP page. Code: as JsFiddle Now Create Your Band List The bands object could have the following structure: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3173,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"uden-featured-image","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-940","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 Band List - 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\/json-band-list\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JSON Band List - Wordpress og WooCommerce\" \/>\n<meta property=\"og:description\" content=\"Resources: Exercise Enter some band names to a Spreadsheet. Here in Excel. Then convert the Excel to JSON: Modify the script so that the band list &#8211; or parts of it &#8211; will be displayed on your WP page. Code: as JsFiddle Now Create Your Band List The bands object could have the following structure: [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thoth.dk\/index.php\/json-band-list\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress og WooCommerce\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-13T09:25:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/09\/8c2df8a4-0f76-4a92-94f8-5f26d7591227.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"3 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/json-band-list\\\/\",\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/json-band-list\\\/\",\"name\":\"JSON Band List - Wordpress og WooCommerce\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/json-band-list\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/json-band-list\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/8c2df8a4-0f76-4a92-94f8-5f26d7591227.jpeg\",\"datePublished\":\"2023-03-13T13:29:17+00:00\",\"dateModified\":\"2025-02-13T09:25:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/json-band-list\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/json-band-list\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/json-band-list\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/8c2df8a4-0f76-4a92-94f8-5f26d7591227.jpeg\",\"contentUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/8c2df8a4-0f76-4a92-94f8-5f26d7591227.jpeg\",\"width\":1024,\"height\":1024,\"caption\":\"Mona Lisa variant (Dall-e 2024)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/json-band-list\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thoth.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSON Band List\"}]},{\"@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 Band List - 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\/json-band-list\/","og_locale":"da_DK","og_type":"article","og_title":"JSON Band List - Wordpress og WooCommerce","og_description":"Resources: Exercise Enter some band names to a Spreadsheet. Here in Excel. Then convert the Excel to JSON: Modify the script so that the band list &#8211; or parts of it &#8211; will be displayed on your WP page. Code: as JsFiddle Now Create Your Band List The bands object could have the following structure: [&hellip;]","og_url":"https:\/\/thoth.dk\/index.php\/json-band-list\/","og_site_name":"Wordpress og WooCommerce","article_modified_time":"2025-02-13T09:25:49+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/09\/8c2df8a4-0f76-4a92-94f8-5f26d7591227.jpeg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimeret l\u00e6setid":"3 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thoth.dk\/index.php\/json-band-list\/","url":"https:\/\/thoth.dk\/index.php\/json-band-list\/","name":"JSON Band List - Wordpress og WooCommerce","isPartOf":{"@id":"https:\/\/thoth.dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/json-band-list\/#primaryimage"},"image":{"@id":"https:\/\/thoth.dk\/index.php\/json-band-list\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/09\/8c2df8a4-0f76-4a92-94f8-5f26d7591227.jpeg","datePublished":"2023-03-13T13:29:17+00:00","dateModified":"2025-02-13T09:25:49+00:00","breadcrumb":{"@id":"https:\/\/thoth.dk\/index.php\/json-band-list\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thoth.dk\/index.php\/json-band-list\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thoth.dk\/index.php\/json-band-list\/#primaryimage","url":"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/09\/8c2df8a4-0f76-4a92-94f8-5f26d7591227.jpeg","contentUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2024\/09\/8c2df8a4-0f76-4a92-94f8-5f26d7591227.jpeg","width":1024,"height":1024,"caption":"Mona Lisa variant (Dall-e 2024)"},{"@type":"BreadcrumbList","@id":"https:\/\/thoth.dk\/index.php\/json-band-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thoth.dk\/"},{"@type":"ListItem","position":2,"name":"JSON Band List"}]},{"@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\/940","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=940"}],"version-history":[{"count":14,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages\/940\/revisions"}],"predecessor-version":[{"id":992,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages\/940\/revisions\/992"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media\/3173"}],"wp:attachment":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media?parent=940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}