{"id":16826,"date":"2022-10-22T07:06:01","date_gmt":"2022-10-22T01:36:01","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/"},"modified":"2022-10-22T07:06:01","modified_gmt":"2022-10-22T01:36:01","slug":"solved-javascript-accessing-nested-properties-of-an-object-literal","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/","title":{"rendered":"[Solved] Javascript accessing nested properties of an object literal"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-48612405\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"48612405\" data-parentid=\"48612333\" 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>The line<\/p>\n<pre><code>el.setAttribute(key, [key]);\n<\/code><\/pre>\n<p>tries to set the attribute to an array containing the key as its only entry (and thus will set <code>href<\/code> to <code>\"href\"<\/code> since the array will get coerced to string). You probably meant<\/p>\n<pre><code>el.setAttribute(key, obj.att[key]);\n\/\/ ------------------^^^^^^^\n<\/code><\/pre>\n<p>Live Example:<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"true\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code snippet-currently-hidden\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>function hoistNav() {\r\n    const nav = [];\r\n    nav[0] = {text: 'HOME', att: {href: \"https:\/\/stackoverflow.com\/questions\/48612333\/home.html\", class: 'nav', id: 'zero'}};\r\n    nav[1] = {text: 'POSTS', att: {href: 'posts.html', class: 'nav', id: 'one'}};\r\n    nav[2] = {text: 'CONTACT', att: {href: 'con.html', class: 'nav', id: 'two'}};\r\n    return nav;\r\n}\r\n\r\nfunction createAnchor(obj) {\r\n    let el = document.createElement('a');\r\n    el.textContent = obj.text;\r\n    for(let key in obj.att){\r\n        el.setAttribute(key, obj.att[key]);\r\n    }\r\n    return el;\r\n}\r\n\r\nlet nav = hoistNav();\r\n\r\nlet obj = nav[0];\r\n\r\nlet anchor = createAnchor(obj);\r\ndocument.body.appendChild(anchor);\r\nconsole.log(anchor.outerHTML);<\/code><\/pre>\n<\/div>\n<\/div>\n<hr>\n<p>Side note: Not quite sure what <code>hoistNav<\/code> is for, you could just make <code>nav<\/code> global to your code (but not actually global):<\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"true\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code snippet-currently-hidden\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>\"use strict\"; \/\/ Strict mode to ensure correct handling of function decl in block\r\n\r\n\/\/ Scoping block to avoid creating globals\r\n{\r\n\r\n  \/\/ Note use of literal notation\r\n  const nav = [\r\n    {text: 'HOME', att: {href: \"https:\/\/stackoverflow.com\/questions\/48612333\/home.html\", class: 'nav', id: 'zero'}},\r\n    {text: 'POSTS', att: {href: 'posts.html', class: 'nav', id: 'one'}},\r\n    {text: 'CONTACT', att: {href: 'con.html', class: 'nav', id: 'two'}}\r\n  ];\r\n\r\n  function createAnchor(obj) {\r\n      let el = document.createElement('a');\r\n      el.textContent = obj.text;\r\n      for (let key in obj.att) {\r\n          el.setAttribute(key, obj.att[key]);\r\n      }\r\n      return el;\r\n  }\r\n\r\n  \/\/ Sample run\r\n  let obj = nav[0];\r\n  let anchor = createAnchor(obj);\r\n  document.body.appendChild(anchor);\r\n  console.log(anchor.outerHTML);\r\n}<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">3<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Javascript accessing nested properties of an object literal <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] The line el.setAttribute(key, [key]); tries to set the attribute to an array containing the key as its only entry (and thus will set href to &#8220;href&#8221; since the array will get coerced to string). You probably meant el.setAttribute(key, obj.att[key]); \/\/ &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;^^^^^^^ Live Example: function hoistNav() { const nav = []; nav[0] = {text: &#8216;HOME&#8217;, &#8230; <a title=\"[Solved] Javascript accessing nested properties of an object literal\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/\" aria-label=\"More on [Solved] Javascript accessing nested properties of an object literal\">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":[3388,4237,333,1948,4236],"class_list":["post-16826","post","type-post","status-publish","format-standard","hentry","category-solved","tag-client-side-scripting","tag-destructuring","tag-javascript","tag-javascript-objects","tag-object-literal"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Javascript accessing nested properties of an object literal - 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-accessing-nested-properties-of-an-object-literal\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Javascript accessing nested properties of an object literal - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The line el.setAttribute(key, [key]); tries to set the attribute to an array containing the key as its only entry (and thus will set href to &quot;href&quot; since the array will get coerced to string). You probably meant el.setAttribute(key, obj.att[key]); \/\/ ------------------^^^^^^^ Live Example: function hoistNav() { const nav = []; nav[0] = {text: &#039;HOME&#039;, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-22T01:36:01+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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Javascript accessing nested properties of an object literal\",\"datePublished\":\"2022-10-22T01:36:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/\"},\"wordCount\":75,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"client-side-scripting\",\"destructuring\",\"javascript\",\"javascript-objects\",\"object-literal\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/\",\"name\":\"[Solved] Javascript accessing nested properties of an object literal - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-10-22T01:36:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Javascript accessing nested properties of an object literal\"}]},{\"@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=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"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 accessing nested properties of an object literal - 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-accessing-nested-properties-of-an-object-literal\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Javascript accessing nested properties of an object literal - JassWeb","og_description":"[ad_1] The line el.setAttribute(key, [key]); tries to set the attribute to an array containing the key as its only entry (and thus will set href to \"href\" since the array will get coerced to string). You probably meant el.setAttribute(key, obj.att[key]); \/\/ ------------------^^^^^^^ Live Example: function hoistNav() { const nav = []; nav[0] = {text: 'HOME', ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/","og_site_name":"JassWeb","article_published_time":"2022-10-22T01:36:01+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Javascript accessing nested properties of an object literal","datePublished":"2022-10-22T01:36:01+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/"},"wordCount":75,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["client-side-scripting","destructuring","javascript","javascript-objects","object-literal"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/","url":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/","name":"[Solved] Javascript accessing nested properties of an object literal - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-10-22T01:36:01+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-accessing-nested-properties-of-an-object-literal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Javascript accessing nested properties of an object literal"}]},{"@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=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","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\/16826","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=16826"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/16826\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=16826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=16826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=16826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}