{"id":20534,"date":"2022-11-10T00:19:49","date_gmt":"2022-11-09T18:49:49","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/"},"modified":"2022-11-10T00:19:49","modified_gmt":"2022-11-09T18:49:49","slug":"solved-javascript-dictionary-creation-dynamically","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/","title":{"rendered":"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-73087348\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"73087348\" data-parentid=\"73087320\" data-score=\"0\" 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>Not sure what you are trying to achieve, but it looks like you get an array of objects from the backend and you want to turn it into an array of objects, but with different property names. That&#8217;s a simple <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\"><code>Array.prototype.map()<\/code><\/a>:<\/p>\n<pre><code>const response = await fetch(url);\nconst data = await response.json();\nconst questions = data.map((question) =&gt; {\n  return {\n    id: question.numb,\n    question: question.text,\n    options: question.choices,\n  };\n});\n<\/code><\/pre>\n<p>If you are just trying to create some kind of centralized state manager \/ store that would also implement accessors to that data, then the main issue is you are passing properties one by one; instead, you should just call <code>add<\/code> once per item (question):<\/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>function mockedFetch() {\n  return new Promise((resolve) =&gt; {\n    setTimeout(() =&gt; {\n      resolve({\n        json: () =&gt; Promise.resolve([{\n          numb: 1,\n          text: 'Q1',\n          choices: ['Q1-A', 'Q1-B'],\n        }, {\n          numb: 2,\n          text: 'Q2',\n          choices: ['Q2-A', 'Q2-B'],\n        }]),\n      });\n    }, 1000 + 2000 * Math.random());\n  });\n}\n      \nclass QuestionStore {\n  data = [];\n\n  addQuestion(question) {\n    this.data.push(question);\n  }\n  \n  getQuestion(id) {\n    return this.data.find(q =&gt; q.id === id);\n  }\n  \n  getQuestions() {\n    return this.data;\n  }\n}\n\nconst questionStore = new QuestionStore();\n      \nasync function getData(){\n  const response = await mockedFetch();\n  const data = await response.json();\n  \n  data.map((question) =&gt; {\n    questionStore.addQuestion({\n      id: question.numb,\n      question: question.text,\n      options: question.choices,\n    });\n  }); \n  \n  console.log(questionStore.getQuestions());\n  console.log(questionStore.getQuestion(1));\n}\n\ngetData();<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.as-console-wrapper {\n  max-height: 100% !important;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<p>However, I think that&#8217;s not the case and this might just be some kind of confusion.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">1<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved JAVASCRIPT DICTIONARY CREATION DYNAMICALLY <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Not sure what you are trying to achieve, but it looks like you get an array of objects from the backend and you want to turn it into an array of objects, but with different property names. That&#8217;s a simple Array.prototype.map(): const response = await fetch(url); const data = await response.json(); const questions = &#8230; <a title=\"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/\" aria-label=\"More on [Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY\">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":[834,333],"class_list":["post-20534","post","type-post","status-publish","format-standard","hentry","category-solved","tag-dictionary","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY - 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-dictionary-creation-dynamically\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Not sure what you are trying to achieve, but it looks like you get an array of objects from the backend and you want to turn it into an array of objects, but with different property names. That&#8217;s a simple Array.prototype.map(): const response = await fetch(url); const data = await response.json(); const questions = ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-09T18:49:49+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-dictionary-creation-dynamically\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY\",\"datePublished\":\"2022-11-09T18:49:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/\"},\"wordCount\":113,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"dictionary\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/\",\"name\":\"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-09T18:49:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY\"}]},{\"@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 DICTIONARY CREATION DYNAMICALLY - 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-dictionary-creation-dynamically\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY - JassWeb","og_description":"[ad_1] Not sure what you are trying to achieve, but it looks like you get an array of objects from the backend and you want to turn it into an array of objects, but with different property names. That&#8217;s a simple Array.prototype.map(): const response = await fetch(url); const data = await response.json(); const questions = ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/","og_site_name":"JassWeb","article_published_time":"2022-11-09T18:49:49+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-dictionary-creation-dynamically\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY","datePublished":"2022-11-09T18:49:49+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/"},"wordCount":113,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["dictionary","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/","url":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/","name":"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-09T18:49:49+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-javascript-dictionary-creation-dynamically\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] JAVASCRIPT DICTIONARY CREATION DYNAMICALLY"}]},{"@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\/20534","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=20534"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/20534\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=20534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=20534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=20534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}