{"id":22888,"date":"2022-11-22T06:22:26","date_gmt":"2022-11-22T00:52:26","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/"},"modified":"2022-11-22T06:22:26","modified_gmt":"2022-11-22T00:52:26","slug":"solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/","title":{"rendered":"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-65086435\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"65086435\" data-parentid=\"65085798\" data-score=\"3\" 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>Here&#8217;s some code that works with recursion. It first finds all the options for the first query, and then recursively calls itself with the array of the objects with the same value for the given query, and at the deepest point, if there is no more queries, it returns the array of objects that meet all the previous queries.<\/p>\n<p>I can answer any questions about this, but I feel like this is explained enough in the comments and this description.<\/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>const people = [\n  {\n    name: \"Jim\",\n    color: \"blue\",\n    gender: \"male\"\n  },\n  {\n    name: \"Susan\",\n    color: \"green\",\n    gender: \"female\"\n  },\n  {\n    name: \"Sam\",\n    color: \"blue\",\n    gender: \"male\"\n  },\n  {\n    name: \"Eddie\",\n    color: \"green\",\n    gender: \"male\"\n  },\n  {\n    name: \"Eva\",\n    color: \"blue\",\n    gender: \"female\"\n  }\n];\n\n\n\nconst deepNest = (arr, [first, ...rest]) =&gt; {\n  let output = {};\n  if (first) {\n    let options = [...arr.reduce((set, val) =&gt; set.add(val[first]), new Set())].sort(); \/\/ Get the options (Set() is a built in thing to remove duplicates), and the sort them alphabetically\n    for (let option of options) {\n      let val = arr.filter((val) =&gt; val[first] === option); \/\/ Get the values that have the same value for the option for the query\n      output[option] = deepNest(val, rest); \/\/ Recursion\n    }\n  } else {\n    output = arr;\n  }\n  return output;\n}\n\ndisplay(deepNest(people, [\"gender\", \"color\"]), [\"gender\", \"color\"]);\ndisplay(deepNest(people, [\"color\", \"gender\"]), [\"color\", \"gender\"]);\ndisplay(deepNest(people, [\"color\", \"name\", \"gender\"]), [\"color\", \"name\", \"gender\"]);\n\n\/\/ My own custom display function, since console.log() makes it look wack\nfunction display(json, query) {\n  const div = document.createElement(\"div\");\n  const h2 = document.createElement(\"h2\");\n  h2.innerText = `[\"${query.join(\"\\\", \\\"\")}\"]`;\n  const pre = document.createElement(\"pre\");\n  pre.innerText = JSON.stringify(json, null, 2);\n  \n  div.appendChild(h2);\n  div.appendChild(pre);\n  \n  document.querySelector(\"body\").appendChild(div);\n}<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>html,\nbody {\n  background: whitesmoke;\n}\n\npre {\n  color: black;\n  background: white;\n  border: 2px solid black;\n  border-radius: 1rem;\n  padding: 1rem;\n}<\/code><\/pre>\n<\/div>\n<\/div><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">6<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Flat array of objects into deep nested object (tree) with dynamic structure [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Here&#8217;s some code that works with recursion. It first finds all the options for the first query, and then recursively calls itself with the array of the objects with the same value for the given query, and at the deepest point, if there is no more queries, it returns the array of objects that &#8230; <a title=\"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/\" aria-label=\"More on [Solved] Flat array of objects into deep nested object (tree) with dynamic structure [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,333,430,1381],"class_list":["post-22888","post","type-post","status-publish","format-standard","hentry","category-solved","tag-arrays","tag-javascript","tag-object","tag-tree"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [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-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Here&#8217;s some code that works with recursion. It first finds all the options for the first query, and then recursively calls itself with the array of the objects with the same value for the given query, and at the deepest point, if there is no more queries, it returns the array of objects that ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-22T00:52:26+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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [closed]\",\"datePublished\":\"2022-11-22T00:52:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/\"},\"wordCount\":111,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"arrays\",\"javascript\",\"object\",\"tree\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/\",\"name\":\"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-22T00:52:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [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=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [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-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [closed] - JassWeb","og_description":"[ad_1] Here&#8217;s some code that works with recursion. It first finds all the options for the first query, and then recursively calls itself with the array of the objects with the same value for the given query, and at the deepest point, if there is no more queries, it returns the array of objects that ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/","og_site_name":"JassWeb","article_published_time":"2022-11-22T00:52:26+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [closed]","datePublished":"2022-11-22T00:52:26+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/"},"wordCount":111,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["arrays","javascript","object","tree"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/","name":"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-22T00:52:26+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-flat-array-of-objects-into-deep-nested-object-tree-with-dynamic-structure-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Flat array of objects into deep nested object (tree) with dynamic structure [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=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","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\/22888","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=22888"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/22888\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=22888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=22888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=22888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}