{"id":15384,"date":"2022-10-11T10:41:22","date_gmt":"2022-10-11T05:11:22","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/"},"modified":"2022-10-11T10:41:22","modified_gmt":"2022-10-11T05:11:22","slug":"solved-javascript-loop-beginner-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/","title":{"rendered":"[Solved] Javascript Loop (Beginner) [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-41069620\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"41069620\" data-parentid=\"41069370\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Using your structure, we can do this:<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>var links = new Array(); \/\/ Missing this part as code\r\n\r\nlinks[0] = new Array();\r\nlinks[0][\"linkName\"] = \"W3Schools\";\r\nlinks[0][\"linkLogo\"] = \"http:\/\/www.w3schools.com\/images\/w3schools.png\";\r\nlinks[0][\"linkURL\"] = \"http:\/\/www.w3schools.com\/\";\r\nlinks[0][\"linkDescription\"] = \"W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.\";\r\n\r\nlinks[1] = new Array();\r\nlinks[1][\"linkName\"] = \"Code Academy\";\r\nlinks[1][\"linkLogo\"] = \"http:\/\/2.bp.blogspot.com\/-5_nn_mBDGb0\/U3RBFBDiozI\/AAAAAAAAm60\/kOmwt-F5x8g\/s1600\/codeacademy.png\";\r\nlinks[1][\"linkURL\"] = \"https:\/\/www.codecademy.com\/\";\r\nlinks[1][\"linkDescription\"] = \"Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages.\";\r\n\r\nlinks[2] = new Array();\r\nlinks[2][\"linkName\"] = \"The World Wide Web Consortium\";\r\nlinks[2][\"linkLogo\"] = \"http:\/\/www.w3.org\/2008\/site\/images\/logo-w3c-mobile-lg\";\r\nlinks[2][\"linkURL\"] = \"http:\/\/www.w3.org\/\";\r\nlinks[2][\"linkDescription\"] = \"The World Wide Web Consortium is the main international standards organization for the World Wide Web.\";\r\n\r\n\/\/ Loop through the main array\r\nfor(var i = 0; i &lt; links.length; ++i){\r\n\r\n  \/\/ As we loop, we'll create new HTML elements that will be configured\r\n  \/\/ with the information we extract from the objects in the array:\r\n  var div = document.createElement(\"div\");\r\n  var a = document.createElement(\"a\");\r\n  var img = document.createElement(\"img\");\r\n  \r\n  \/\/ Use data in the nested array to configure the new HTML element\r\n  a.href = links[i][\"linkURL\"];\r\n  img.src = links[i][\"linkLogo\"];\r\n  img.alt = links[i][\"linkDescription\"];\r\n  img.title = links[i][\"linkName\"];\r\n  \r\n  \/\/ Place the image inside of the link:\r\n  a.appendChild(img);\r\n  \r\n  \/\/ Place the link inside of the div\r\n  div.appendChild(a);\r\n  \r\n  \/\/ Inject div element into the web page\r\n  document.body.appendChild(div);\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>img {width:200px}<\/code><\/pre>\n<\/div>\n<\/div>\n<p>However, in JavaScript, arrays are best for storing single data items or even nested arrays. <strong>But, when you need to store names and values to go with those names, it&#8217;s best to use an Object, which is designed for key\/value pair storage.<\/strong><\/p>\n<p>Here is your data, reorganized into objects that are then placed into an array and finally, the array is looped, the object data is extracted and the data is placed into HTML elements.<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>\/\/ First set up objects to store the name\/value pairs (arrays don't do this)\r\nvar object1 = {\r\n linkName : \"W3Schools\",\r\n linkLogo : \"http:\/\/www.w3schools.com\/images\/w3schools.png\",\r\n linkURL : \"http:\/\/www.w3schools.com\/\",\r\n linkDescription : \"W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript and PHP.\"\r\n};\r\n\r\nvar object2 = {\r\n linkName : \"Code Academy\",\r\n linkLogo : \"http:\/\/2.bp.blogspot.com\/-5_nn_mBDGb0\/U3RBFBDiozI\/AAAAAAAAm60\/kOmwt-F5x8g\/s1600\/codeacademy.png\",\r\n linkURL : \"https:\/\/www.codecademy.com\/\",\r\n linkDescription : \"Codecademy is an online interactive platform that offers free coding classes in 9 different programming languages.\"\r\n};\r\n\r\nvar object3 = {\r\n linkName : \"The World Wide Web Consortium\",\r\n linkLogo : \"http:\/\/www.w3.org\/2008\/site\/images\/logo-w3c-mobile-lg\",\r\n linkURL : \"http:\/\/www.w3.org\/\",\r\n linkDescription : \"The World Wide Web Consortium is the main international standards organization for the World Wide Web.\"\r\n};\r\n\r\n\/\/ Place the objects into an array:\r\nvar objects = [object1, object2, object3];\r\n\r\n\/\/ Loop through each of the objects in the array\r\nfor(var i = 0; i &lt; objects.length; ++i){\r\n\r\n  \/\/ As we loop, we'll create new HTML elements that will be configured\r\n  \/\/ with the information we extract from the objects in the array:\r\n  var div = document.createElement(\"div\");\r\n  var a = document.createElement(\"a\");\r\n  var img = document.createElement(\"img\");\r\n  \r\n  \/\/ Use data in the object to configure the new HTML element\r\n  a.href = objects[i].linkURL;\r\n  img.src = objects[i].linkLogo;\r\n  img.alt = objects[i].linkDescription;\r\n  img.title = objects[i].linkName;\r\n  \r\n  \/\/ Place the image inside of the link:\r\n  a.appendChild(img);\r\n  \r\n  \/\/ Place the link inside of the div\r\n  div.appendChild(a);\r\n  \r\n  \/\/ Inject div element into the web page\r\n  document.body.appendChild(div);\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>img {width: 200px;}<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">4<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Javascript Loop (Beginner) [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Using your structure, we can do this: var links = new Array(); \/\/ Missing this part as code links[0] = new Array(); links[0][&#8220;linkName&#8221;] = &#8220;W3Schools&#8221;; links[0][&#8220;linkLogo&#8221;] = &#8220;http:\/\/www.w3schools.com\/images\/w3schools.png&#8221;; links[0][&#8220;linkURL&#8221;] = &#8220;http:\/\/www.w3schools.com\/&#8221;; links[0][&#8220;linkDescription&#8221;] = &#8220;W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript &#8230; <a title=\"[Solved] Javascript Loop (Beginner) [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/\" aria-label=\"More on [Solved] Javascript Loop (Beginner) [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[361,639,333,391],"class_list":["post-15384","post","type-post","status-publish","format-standard","hentry","category-solved","tag-arrays","tag-if-statement","tag-javascript","tag-loops"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Javascript Loop (Beginner) [closed] - JassWeb<\/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:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Javascript Loop (Beginner) [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Using your structure, we can do this: var links = new Array(); \/\/ Missing this part as code links[0] = new Array(); links[0][&quot;linkName&quot;] = &quot;W3Schools&quot;; links[0][&quot;linkLogo&quot;] = &quot;http:\/\/www.w3schools.com\/images\/w3schools.png&quot;; links[0][&quot;linkURL&quot;] = &quot;http:\/\/www.w3schools.com\/&quot;; links[0][&quot;linkDescription&quot;] = &quot;W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-11T05:11:22+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Javascript Loop (Beginner) [closed]\",\"datePublished\":\"2022-10-11T05:11:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/\"},\"wordCount\":96,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"arrays\",\"if-statement\",\"javascript\",\"loops\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/\",\"name\":\"[Solved] Javascript Loop (Beginner) [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-11T05:11:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Javascript Loop (Beginner) [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Javascript Loop (Beginner) [closed] - JassWeb","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:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Javascript Loop (Beginner) [closed] - JassWeb","og_description":"[ad_1] Using your structure, we can do this: var links = new Array(); \/\/ Missing this part as code links[0] = new Array(); links[0][\"linkName\"] = \"W3Schools\"; links[0][\"linkLogo\"] = \"http:\/\/www.w3schools.com\/images\/w3schools.png\"; links[0][\"linkURL\"] = \"http:\/\/www.w3schools.com\/\"; links[0][\"linkDescription\"] = \"W3Schools is a web developer information website, with tutorials and references relating to web development topics such as HTML, CSS, JavaScript ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/","og_site_name":"JassWeb","article_published_time":"2022-10-11T05:11:22+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Javascript Loop (Beginner) [closed]","datePublished":"2022-10-11T05:11:22+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/"},"wordCount":96,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["arrays","if-statement","javascript","loops"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/","name":"[Solved] Javascript Loop (Beginner) [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-11T05:11:22+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-loop-beginner-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Javascript Loop (Beginner) [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/15384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=15384"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/15384\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=15384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=15384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=15384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}