|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>Document</title> |
| 7 | +<link rel="stylesheet" href="https://gist.githubusercontent.com/bgoonz/37bca66ce8441c688900b6f082f10560/raw/2e9a5966431d89b8ce6355e7b8039ba42554978b/CSS-Styling-for-Pandoc-generated-html.css"> |
| 8 | +<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> |
| 9 | +<link rel="stylesheet" href="https://raw.githubusercontent.com/bgoonz/styling-templates/master/bootstrap3/assets/css/bootstrap.min.css"> |
| 10 | +<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg==" crossorigin="anonymous"></script> |
| 11 | +<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-css.min.js" integrity="sha512-1qYok2x2Rsm2y+mrdyrp00iH7xYSgVyIQ1egDAoT7CBZ3kSzlaJK+NhWAh746NeL3gnH6dnP8FGS+3xOdwO7ig==" crossorigin="anonymous"></script> |
| 12 | +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" /> |
| 13 | + |
| 14 | +</head> |
| 15 | +<body>; |
| 16 | +<p>Flattens an object with the paths for keys.</p> |
| 17 | +<ul> |
| 18 | +<li>Use recursion.</li> |
| 19 | +<li>Use <code>Object.keys(obj)</code> combined with <code>Array.prototype.reduce()</code> to convert every leaf node to a flattened path node.</li> |
| 20 | +<li>If the value of a key is an object, the function calls itself with the appropriate <code>prefix</code> to create the path using <code>Object.assign()</code>.</li> |
| 21 | +<li>Otherwise, it adds the appropriate prefixed key-value pair to the accumulator object.</li> |
| 22 | +<li>You should always omit the second argument, <code>prefix</code>, unless you want every key to have a prefix.</li> |
| 23 | +</ul> |
| 24 | +<div class="sourceCode" id="cb1"><pre class="sourceCode js"><code class="language-js sourceCode javascript"><a class="sourceLine" id="cb1-1" title="1"><span class="kw">const</span> flattenObject <span class="op">=</span> (obj<span class="op">,</span> prefix <span class="op">=</span> <span class="st">''</span>) <span class="kw">=></span></a> |
| 25 | +<a class="sourceLine" id="cb1-2" title="2"> <span class="va">Object</span>.<span class="at">keys</span>(obj).<span class="at">reduce</span>((acc<span class="op">,</span> k) <span class="kw">=></span> <span class="op">{</span></a> |
| 26 | +<a class="sourceLine" id="cb1-3" title="3"> <span class="kw">const</span> pre <span class="op">=</span> <span class="va">prefix</span>.<span class="at">length</span> <span class="op">?</span> <span class="vs">`</span><span class="sc">${</span>prefix<span class="sc">}</span><span class="vs">.`</span> : <span class="st">''</span><span class="op">;</span></a> |
| 27 | +<a class="sourceLine" id="cb1-4" title="4"> <span class="cf">if</span> (</a> |
| 28 | +<a class="sourceLine" id="cb1-5" title="5"> <span class="kw">typeof</span> obj[k] <span class="op">===</span> <span class="st">'object'</span> <span class="op">&&</span></a> |
| 29 | +<a class="sourceLine" id="cb1-6" title="6"> obj[k] <span class="op">!==</span> <span class="kw">null</span> <span class="op">&&</span></a> |
| 30 | +<a class="sourceLine" id="cb1-7" title="7"> <span class="va">Object</span>.<span class="at">keys</span>(obj[k]).<span class="at">length</span> <span class="op">></span> <span class="dv">0</span></a> |
| 31 | +<a class="sourceLine" id="cb1-8" title="8"> )</a> |
| 32 | +<a class="sourceLine" id="cb1-9" title="9"> <span class="va">Object</span>.<span class="at">assign</span>(acc<span class="op">,</span> <span class="at">flattenObject</span>(obj[k]<span class="op">,</span> pre <span class="op">+</span> k))<span class="op">;</span></a> |
| 33 | +<a class="sourceLine" id="cb1-10" title="10"> <span class="cf">else</span> acc[pre <span class="op">+</span> k] <span class="op">=</span> obj[k]<span class="op">;</span></a> |
| 34 | +<a class="sourceLine" id="cb1-11" title="11"> <span class="cf">return</span> acc<span class="op">;</span></a> |
| 35 | +<a class="sourceLine" id="cb1-12" title="12"> <span class="op">},</span> <span class="op">{}</span>)<span class="op">;</span></a></code></pre></div> |
| 36 | +<div class="sourceCode" id="cb2"><pre class="sourceCode js"><code class="language-js sourceCode javascript"><a class="sourceLine" id="cb2-1" title="1"><span class="at">flattenObject</span>(<span class="op">{</span> <span class="dt">a</span><span class="op">:</span> <span class="op">{</span> <span class="dt">b</span><span class="op">:</span> <span class="op">{</span> <span class="dt">c</span><span class="op">:</span> <span class="dv">1</span> <span class="op">}</span> <span class="op">},</span> <span class="dt">d</span><span class="op">:</span> <span class="dv">1</span> <span class="op">}</span>)<span class="op">;</span> <span class="co">// { 'a.b.c': 1, d: 1 }</span></a></code></pre></div> |
| 37 | +</body></html> |
0 commit comments