1import{_ as n,c as a,l,o}from"./chunks/framework.24cd38f4.js";const i=JSON.parse('{"title":"Intro to the easiest DB ever, Firestore","description":"Introduction to Firestore, a Firebase database.","frontmatter":{"title":"Intro to the easiest DB ever, Firestore","date":"2018-11-17T00:00:00.000Z","tags":["Firebase"],"series":"Firestore","description":"Introduction to Firestore, a Firebase database."},"headers":[],"relativePath":"dev-blog/intro-firestore.md"}'),p={name:"dev-blog/intro-firestore.md"};function t(e,s,c,r,F,y){return o(),a("div",null,[...s[0]||(s[0]=[l(`<p>Let me introduce you to the easiest database in the world. Itâs called Firestore and it lives in the cloud. Itâs really easy to get started as all coding is done on the front end, but it also scales really well as it is a product by Firebase from Google.</p><h2 id="set-up" tabindex="-1">Set up <a class="header-anchor" href="#set-up" aria-label="Permalink to "Set up"">â</a></h2><p>Feel free to follow along with the coding as I will show you how it works. If you get stuck on where to put the code, the full source code is provided at the bottom.</p><p>First, go to the <a href="https://console.firebase.google.com/" target="_blank" rel="noreferrer">Firebase console</a> and spend the 3 clicks to create a project. Then inside the project, click Database in the navigation menu and Create database button (test mode is good for now). We will deal with securing our database later. Actually, that is all the setup needed, you now have a working NoSQL database.</p><p>I will walk you through how to read, write, update and delete to your database from the web. But you can see their <a href="https://firebase.google.com/docs/firestore/quickstart" target="_blank" rel="noreferrer">documentation</a> for IOS, Android, Java, Python, Node.js, Go, PHP, C#, and Ruby. (Thatâs their support as Iâm writing this, I wonât be shocked if they add more language and platform support later)</p><p>Create an HTML file to get started.</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">></span></span> 2<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span> 3<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span> 4<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">utf-8</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 5<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 6<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Title</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span></span> 7<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span> 8<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span> 9<span class="line"><span style="color:#89DDFF;"> <</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span> 10<span class="line"><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">/*Your JavaScript code goes here*/</span></span> 11<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span> 12<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span> 13<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">></span></span> 14<span class="line"></span></code></pre></div><p>Then we need to add Firebase to our web application. The simplest way is to go to the project overview in the Firebase console, click the web symbol above the text â<em>Add an app to get started</em>â, then just copy the code and paste it into your HTML file.</p><p>We are now ready to create a reference for our database.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
14<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> db </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> firebase</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">firestore</span><span style="color:#BABED8;">()</span></span> 15<span class="line"></span></code></pre></div><p>Firestore saves our data in collections that contain documents. Collections can also have sub-collections. Letâs say we have the collection families and cities. Let's create references for our collections.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> families </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> db</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">collection</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">families</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 16<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> cities </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> db</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">collection</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">cities</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 17<span class="line"></span></code></pre></div><h2 id="adding-data" tabindex="-1">Adding data <a class="header-anchor" href="#adding-data" aria-label="Permalink to "Adding data"">â</a></h2><p>We are going to use the <code>add</code> method to add families and <code>set</code> method to add population to the city.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> addFamily </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">surname</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 18<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">families</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">surname</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 19<span class="line"><span style="color:#89DDFF;">}</span></span> 20<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> addCity </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">population</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 21<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">parseInt</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">population</span><span style="color:#F07178;">)</span></span> 22<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span></span> 23<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span></span> 24<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">
24{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 25<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Document successfully written!</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">))</span></span> 26<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">error</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Error writing document: </span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">error</span><span style="color:#F07178;">))</span></span> 27<span class="line"><span style="color:#89DDFF;">}</span></span> 28<span class="line"></span></code></pre></div><p>The differences are that <code>set</code> uses the city as the ID, while <code>add</code> autogenerates an ID. Also if you use the set method and a document with the same ID already exists, it will be overwritten unless you add the { merge: true } option. Notice that <code>then</code> and <code>catch</code> is not required.</p><p>Now we need some HTML.</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">family-name</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Surname:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 29<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">family-name</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 30<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">family-button</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Add</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 31<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /></span></span> 32<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">city</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">City:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 33<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">city</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 34<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">population</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Population:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 35<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">population</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 36<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">city-button</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Add</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 37<span class="line"></span></code></pre></div><p>And some event listeners for our buttons.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
37<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#family-button</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 38<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#family-name</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span></span> 39<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">addFamily</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">name</span><span style="color:#F07178;">)</span></span> 40<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 41<span class="line"><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#city-button</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 42<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">city</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#city</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span></span> 43<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">population</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#population</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span></span> 44<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">addCity</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">population</span><span style="color:#F07178;">)</span></span> 45<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 46<span class="line"></span></code></pre></div><p>That is all you need to save data to your database, no need to create tables or schemas beforehand. If the collection doesnât exist they will be created. You can see and administrate your data through the Firebase console (big bonus).</p>
46<h2 id="getting-data" tabindex="-1">Getting data <a class="header-anchor" href="#getting-data" aria-label="Permalink to "Getting data"">â</a></h2><h3 id="get-a-single-object" tabindex="-1">Get a single object <a class="header-anchor" href="#get-a-single-object" aria-label="Permalink to "Get a single object"">â</a></h3><p>This is how we retrieve the population of a single city from Firestore. <code>data()</code> returns our object.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> populationCity </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 47<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">doc</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">()</span></span> 48<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">exists</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span> 49<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span></span> 50<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 51<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">city not found</span><span style="color:#89DDFF;">'</span></span> 52<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 53<span class="line"><span style="color:#89DDFF;">}</span></span> 54<span class="line"></span></code></pre></div><p>Letâs add HTML.</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">search-city</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Population for city:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 55<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">search-city</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 56<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">population-button</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Add</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 57<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">result-population</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">></span></span> 58<span class="line"></span></code></pre></div><p>And JavaScript to use our populationCity method.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
58<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#population-button</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 59<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">city</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#search-city</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span></span> 60<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">population</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">populationCity</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span></span> 61<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#result-population</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">population</span></span> 62<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 63<span class="line"></span></code></pre></div><h3 id="getting-multiple-objects" tabindex="-1">Getting multiple objects <a class="header-anchor" href="#getting-multiple-objects" aria-label="Permalink to "Getting multiple objects"">â</a></h3><p>If we want more objects from a collection we can use the get method on our cities reference. But we also have the option to filter, order, and limit our query. Letâs get the 3 biggest cities with over 1 million in population.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> getCities </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
63{</span></span> 64<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">querySnapshot</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">where</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pop</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">>=</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">orderBy</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pop</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">desc</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">limit</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">3</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">()</span></span> 65<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> []</span></span> 66<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">querySnapshot</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">doc</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">))</span></span> 67<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span></span> 68<span class="line"><span style="color:#89DDFF;">}</span></span> 69<span class="line"></span></code></pre></div><p>Time for some HTML</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">3 big cities:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">get-big</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Get cities</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 70<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">big-result</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span> 71<span class="line"></span></code></pre></div><p>and JavaScript to use our function.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
71<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#get-big</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 72<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">getCities</span><span style="color:#F07178;">()</span></span> 73<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">bigDiv</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#big-result</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 74<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">c</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 75<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 76<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">c</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, </span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">c</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#89DDFF;">}\`</span></span> 77<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">bigDiv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">p</span><span style="color:#F07178;">)</span></span> 78<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 79<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 80<span class="line"></span></code></pre></div><h3 id="getting-real-time-updates" tabindex="-1">Getting real-time updates <a class="header-anchor" href="#getting-real-time-updates" aria-label="Permalink to "Getting real-time updates"">â</a></h3><p>To get real-time updates to either a single document or a collection we will use the <code>onSnapshot</code> method. Letâs get all the cities.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
80<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onSnapshot</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">snapshot</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 81<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">snapshot</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">docChanges</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">change</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 82<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">switch</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">type</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span> 83<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">added</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span></span> 84<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cityAdded</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 85<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">break</span></span> 86<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">modified</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span></span> 87<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cityUpdated</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 88<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">break</span></span> 89<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">removed</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span></span> 90<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cityRemoved</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#F07178;">)</span></span> 91<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">break</span></span> 92<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 93<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 94<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 95<span class="line"></span></code></pre></div><p>We use the <code>docChanges</code> method to know what change happened. If a document was added, modified, or removed. Now letâs show the cities.</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">All cities</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 96<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">all-cities</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span> 97<span class="line"></span></code></pre></div><p>JavaScript with the three methods to populate our div.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
97<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> citiesDiv </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#all-cities</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 98<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> cityAdded </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 99<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 100<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, </span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#89DDFF;">}\`</span></span> 101<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span></span> 102<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">citiesDiv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">p</span><span style="color:#F07178;">)</span></span> 103<span class="line"><span style="color:#89DDFF;">}</span></span> 104<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> cityUpdated </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 105<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, </span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#89DDFF;">}\`</span></span> 106<span class="line"><span style="color:#89DDFF;">}</span></span> 107<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> cityRemoved </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">name</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
107{</span></span> 108<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">name</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">remove</span><span style="color:#F07178;">()</span></span> 109<span class="line"><span style="color:#89DDFF;">}</span></span> 110<span class="line"></span></code></pre></div><p>You can use the <code>addCity</code> method for an already existing city to trigger an update. We havenât covered deletion yet, but you can do it from the developer console if you want to test it.</p><h2 id="updating-data" tabindex="-1">Updating data <a class="header-anchor" href="#updating-data" aria-label="Permalink to "Updating data"">â</a></h2><p>Updating data is simple, just get the document you would like to change. Then call the <code>update</code> method with only the data you would like to change.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> updatePopulation </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">pop</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 111<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span> 112<span class="line"><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pop</span><span style="color:#89DDFF;">,</span></span> 113<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 114<span class="line"><span style="color:#89DDFF;">}</span></span> 115<span class="line"></span></code></pre></div><p>We would like the option to add 100 to a city population.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> b </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">button</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 116<span class="line"><span style="color:#BABED8;">b</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">+100</span><span style="color:#89DDFF;">'</span></span> 117<span class="line"><span style="color:#BABED8;">b</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onclick</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">updatePopulation</span><span style="color:#BABED8;">(city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop </span><span style="color:#89DDFF;">+</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">100</span><span style="color:#BABED8;">)</span></span> 118<span class="line"><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#BABED8;">(b)</span></span> 119<span class="line"></span></code></pre></div><p>This should be added inside the <code>cityAdded</code> function we created earlier.</p><h3 id="transactions" tabindex="-1">Transactions <a class="header-anchor" href="#transactions" aria-label="Permalink to "Transactions"">â</a></h3><p>What if the city administrators had opened the application and clicked the increase button at the exact same time? In that case, we need to use a transaction to avoid a race condition.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
119<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> populationTransaction </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">inc</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 120<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">cityRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span></span> 121<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">db</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">runTransaction</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">transaction</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 122<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">transaction</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">cityRef</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">sfdoc</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 123<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">newPop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">sfdoc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">inc</span></span> 124<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">transaction</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">cityRef</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">newPop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 125<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 126<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 127<span class="line"><span style="color:#89DDFF;">}</span></span> 128<span class="line"></span></code></pre></div><p>Then update our <code>cityAdded</code> function.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span>
128<pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">//b.onclick = () => updatePopulation(city.name, city.pop + 100);</span></span> 129<span class="line"><span style="color:#BABED8;">b</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onclick</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">populationTransaction</span><span style="color:#BABED8;">(city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">100</span><span style="color:#BABED8;">)</span></span> 130<span class="line"></span></code></pre></div><p>If you spam-click the button before it disappears you will see that the transaction is working.</p><p>Remember that in a transaction you need to do the read (<code>data()</code>) before the write (<code>update</code>). Also if your transaction contains multiple writes and one fails, all writes will be rolled back.</p><h2 id="deleting-data" tabindex="-1">Deleting data <a class="header-anchor" href="#deleting-data" aria-label="Permalink to "Deleting data"">â</a></h2><p>Deleting data is simple.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> deleteCity </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 131<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">delete</span><span style="color:#F07178;">()</span></span> 132<span class="line"><span style="color:#89DDFF;">}</span></span> 133<span class="line"></span></code></pre></div><p>Adding a button inside our <code>cityAdded</code> function to call <code>deleteCity</code>.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> d </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">button</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 134<span class="line"><span style="color:#BABED8;">d</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">delete</span><span style="color:#89DDFF;">'</span></span> 135<span class="line"><span style="color:#BABED8;">d</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onclick</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">deleteCity</span><span style="color:#BABED8;">(city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name)</span></span> 136<span class="line"><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#BABED8;">(d)</span></span> 137<span class="line"></span></code></pre></div><h2 id="sub-collections" tabindex="-1">Sub-collections <a class="header-anchor" href="#sub-collections" aria-label="Permalink to "Sub-collections"">â</a></h2><p>If you need nested data, you could just have a list of objects inside your document. But then you need to retrieve the whole list every time you query your document. A better way that provides more flexibility is to use sub-collections.
137</p><p>Let's add a demo function, so you get the idea.</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> addDemoFamily </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 138<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*demo family object*/</span></span> 139<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">demoFamily</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 140<span class="line"><span style="color:#F07178;"> surname</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Smith</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 141<span class="line"><span style="color:#F07178;"> members</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span></span> 142<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 143<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Joe</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 144<span class="line"><span style="color:#F07178;"> role</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Child</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 145<span class="line"><span style="color:#F07178;"> favouriteFood</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Pizza</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Fish</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Pancakes</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span></span> 146<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span> 147<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 148<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Lucy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 149<span class="line"><span style="color:#F07178;"> role</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Mother</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 150<span class="line"><span style="color:#F07178;"> favouriteFood</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Soup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Pizza</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span></span> 151<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span> 152<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">
152{</span></span> 153<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Amy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 154<span class="line"><span style="color:#F07178;"> role</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Child</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 155<span class="line"><span style="color:#F07178;"> favouriteFood</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Icecream</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span></span> 156<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span> 157<span class="line"><span style="color:#F07178;"> ]</span><span style="color:#89DDFF;">,</span></span> 158<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 159<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*Adding a family document*/</span></span> 160<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">docRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">families</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> surname</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">demoFamily</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">surname</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 161<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*Getting our sub-collection*/</span></span> 162<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">memberRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">docRef</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">collection</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">members</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 163<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*Adding documents to our sub-collection through a batch*/</span></span> 164<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">batch</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">db</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">batch</span><span style="color:#F07178;">()</span></span> 165<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">demoFamily</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">members</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">length</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#89DDFF;">++</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">
165{</span></span> 166<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">batch</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">memberRef</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">''</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">demoFamily</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">members</span><span style="color:#F07178;">[</span><span style="color:#BABED8;">i</span><span style="color:#F07178;">])</span></span> 167<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 168<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">batch</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#F07178;">()</span></span> 169<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*Reading our saved data with a query*/</span></span> 170<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">querySnapshot</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">memberRef</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">where</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">role</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">==</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Child</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">()</span></span> 171<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> []</span></span> 172<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">querySnapshot</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">doc</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#F07178;">))</span></span> 173<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">alert</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Only children: </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#F07178;">)</span></span> 174<span class="line"><span style="color:#89DDFF;">}</span></span> 175<span class="line"></span></code></pre></div><p>We have used a batched write to add all family members, to do the writing in one commit call. Then we need a button to trigger the function.</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#82AAFF;">addDemoFamily</span><span style="color:#C3E88D;">()</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Add demo family</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 176<span class="line"></span></code></pre></div><p>Visit your Firebase console to see how your data is added and structured.</p><h2 id="conclusion" tabindex="-1">Conclusion <a class="header-anchor" href="#conclusion" aria-label="Permalink to "Conclusion"">â</a></h2><p>I have now covered most of the Firestore functionality. I hope you see how easy it is. No need to set up a server that needs to connect to a database and provide an API. And we get a lot of functionality such as offline support, real-time updates, and an administration user interface.</p><p>But what about security? If all this happens from the client, then our data cannot be safe. Security should always be done in the backend. This is where Firestore rules and Firebase authentication plays their part. Follow my next article to see how you can secure your database and customize who and which actions are allowed.</p><h3 id="all-code" tabindex="-1">All code <a class="header-anchor" href="#all-code" aria-label="Permalink to "All code"">â</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">></span></span> 177<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">en</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span> 178<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span> 179<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">utf-8</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 180<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">width=device-width, initial-scale=1.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 181<span class="line"></span> 182<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Title</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span></span> 183<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">author</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Gaute Meek Olsen</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 184<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span> 185<span class="line"></span> 186<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span> 187<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">family-name</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Surname:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 188<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">family-name</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 189<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">family-button</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Add</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 190<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /></span></span> 191<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">city</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">City:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 192<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">city</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 193<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">population</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Population:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 194<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">population</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 195<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">city-button</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Add</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 196<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /></span></span> 197<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">search-city</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Population for city:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 198<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </sp
198an><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">search-city</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span> 199<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">population-button</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Add</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 200<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">result-population</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">></span></span> 201<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /></span></span> 202<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">3 big cities:</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">get-big</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Get cities</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 203<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">big-result</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span> 204<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /></span></span> 205<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">All cities</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span> 206<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">all-cities</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span> 207<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /></span></span> 208<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#82AAFF;">addDemoFamily</span><span style="color:#C3E88D;">()</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Add demo family</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">></span></span> 209<span class="line"></span> 210<span class="line"><span style="color:#89DDFF;"> <</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">
210https://www.gstatic.com/firebasejs/5.5.8/firebase.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span> 211<span class="line"><span style="color:#89DDFF;"> <</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span> 212<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// Initialize Firebase</span></span> 213<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">var</span><span style="color:#BABED8;"> config </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 214<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">apiKey</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">[get this from your Firebase console]</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 215<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">authDomain</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">[get this from your Firebase console]</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 216<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">databaseURL</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">[get this from your Firebase console]</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 217<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">projectId</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">[get this from your Firebase console]</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 218<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">storageBucket</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">[get this from your Firebase console]</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 219<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">messagingSenderId</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">[get this from your Firebase console]</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 220<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span> 221<span class="line"><span style="color:#BABED8;"> firebase</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">initializeApp</span><span style="color:#BABED8;">(config)</span></span> 222<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span> 223<span class="line"><span style="color:#89DDFF;"> <</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span> 224<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> db </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> firebase</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">firestore</span><span style="color:#BABED8;">()</span></span> 225<span class="line"></span> 226<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> families </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> db</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">collection</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">families</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 227<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> cities </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> db</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">collection</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">cities</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 228<span class="line"></span> 229<span class="line"><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#family-button</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
229{</span></span> 230<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#family-name</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span></span> 231<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">addFamily</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">name</span><span style="color:#F07178;">)</span></span> 232<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 233<span class="line"><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#city-button</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 234<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">city</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#city</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span></span> 235<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">population</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#population</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span></span> 236<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">addCity</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">population</span><span style="color:#F07178;">)</span></span> 237<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 238<span class="line"></span> 239<span class="line"><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#population-button</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
239{</span></span> 240<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">city</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#search-city</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span></span> 241<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">population</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">populationCity</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span></span> 242<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#result-population</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">population</span></span> 243<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 244<span class="line"><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#get-big</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addEventListener</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">click</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 245<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">getCities</span><span style="color:#F07178;">()</span></span> 246<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">bigDiv</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#big-result</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 247<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">c</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">
247{</span></span> 248<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 249<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">c</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, </span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">c</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#89DDFF;">}\`</span></span> 250<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">bigDiv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">p</span><span style="color:#F07178;">)</span></span> 251<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 252<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 253<span class="line"></span> 254<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> addFamily </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">surname</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 255<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">families</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">surname</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 256<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 257<span class="line"></span> 258<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> addCity </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">population</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 259<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">parseInt</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">population</span><span style="color:#F07178;">)</span></span> 260<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span></span> 261<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span></span> 262<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">
262{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 263<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Document successfully written!</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">))</span></span> 264<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">error</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Error writing document: </span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">error</span><span style="color:#F07178;">))</span></span> 265<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 266<span class="line"></span> 267<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> populationCity </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 268<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">doc</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">()</span></span> 269<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">exists</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span> 270<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span></span> 271<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">
271{</span></span> 272<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">city not found</span><span style="color:#89DDFF;">'</span></span> 273<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 274<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 275<span class="line"></span> 276<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> getCities </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 277<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">querySnapshot</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">where</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pop</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">>=</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">orderBy</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pop</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">desc</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">limit</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">3</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">()</span></span> 278<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> []</span></span> 279<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">querySnapshot</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">doc</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">))</span></span> 280<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span></span> 281<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 282<span class="line"></span> 283<span class="line"><span style="color:#BABED8;"> cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onSnapshot</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">snapshot</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
283{</span></span> 284<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">snapshot</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">docChanges</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">change</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 285<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">switch</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">type</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span> 286<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">added</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span></span> 287<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cityAdded</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 288<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">break</span></span> 289<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">modified</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span></span> 290<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cityUpdated</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 291<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">break</span></span> 292<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">case</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">removed</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span></span> 293<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cityRemoved</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">change</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#F07178;">)</span></span> 294<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">break</span></span> 295<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 296<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 297<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span></span> 298<span class="line"></span> 299<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> citiesDiv </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#all-cities</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span></span> 300<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> cityAdded </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
300{</span></span> 301<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 302<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, </span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#89DDFF;">}\`</span></span> 303<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">id</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span></span> 304<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">b</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">button</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 305<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">b</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">+100</span><span style="color:#89DDFF;">'</span></span> 306<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">//b.onclick = () => updatePopulation(city.name, city.pop + 100);</span></span> 307<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">b</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onclick</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">populationTransaction</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">100</span><span style="color:#F07178;">)</span></span> 308<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">b</span><span style="color:#F07178;">)</span></span> 309<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">d</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">button</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 310<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">d</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">delete</span><span style="color:#89DDFF;">'</span></span> 311<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">d</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onclick</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">deleteCity</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#F07178;">)</span></span> 312<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">p</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">d</span><span style="color:#F07178;">)</span></span> 313<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">citiesDiv</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">p</span><span style="color:#F07178;">)</span></span> 314<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 315<span class="line"></span> 316<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> cityUpdated </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
316{</span></span> 317<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">textContent</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">, </span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">city</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#89DDFF;">}\`</span></span> 318<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 319<span class="line"></span> 320<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> cityRemoved </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">name</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 321<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">name</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">remove</span><span style="color:#F07178;">()</span></span> 322<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 323<span class="line"></span> 324<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> updatePopulation </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">pop</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 325<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span> 326<span class="line"><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pop</span><span style="color:#89DDFF;">,</span></span> 327<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 328<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 329<span class="line"></span> 330<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> populationTransaction </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">inc</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
330{</span></span> 331<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">cityRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span></span> 332<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">db</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">runTransaction</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">transaction</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 333<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">transaction</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">cityRef</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">sfdoc</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 334<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">newPop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">sfdoc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">pop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">inc</span></span> 335<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">transaction</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">update</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">cityRef</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> pop</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">newPop</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 336<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 337<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 338<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 339<span class="line"></span> 340<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> deleteCity </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">city</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">
340{</span></span> 341<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">cities</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">city</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">delete</span><span style="color:#F07178;">()</span></span> 342<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 343<span class="line"></span> 344<span class="line"><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> addDemoFamily </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">async</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span> 345<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*demo family object*/</span></span> 346<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">demoFamily</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 347<span class="line"><span style="color:#F07178;"> surname</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Smith</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 348<span class="line"><span style="color:#F07178;"> members</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span></span> 349<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 350<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Joe</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 351<span class="line"><span style="color:#F07178;"> role</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Child</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 352<span class="line"><span style="color:#F07178;"> favouriteFood</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Pizza</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Fish</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Pancakes</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span></span> 353<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span> 354<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span> 355<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Lucy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 356<span class="line"><span style="color:#F07178;"> role</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Mother</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 357<span class="line"><span style="color:#F07178;"> favouriteFood</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Soup</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Pizza</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span></span> 358<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span> 359<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">
359{</span></span> 360<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Amy</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 361<span class="line"><span style="color:#F07178;"> role</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Child</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span> 362<span class="line"><span style="color:#F07178;"> favouriteFood</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Icecream</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">,</span></span> 363<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span> 364<span class="line"><span style="color:#F07178;"> ]</span><span style="color:#89DDFF;">,</span></span> 365<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 366<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*Adding a family document*/</span></span> 367<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">docRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">families</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> surname</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">demoFamily</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">surname</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span> 368<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*Getting our sub-collection*/</span></span> 369<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">memberRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">docRef</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">collection</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">members</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span></span> 370<span class="line"></span> 371<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*Adding documents to our sub-collection through a batch*/</span></span> 372<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">batch</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">db</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">batch</span><span style="color:#F07178;">()</span></span> 373<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#F07178;"> (</span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">demoFamily</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">members</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">length</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#89DDFF;">++</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">
373{</span></span> 374<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">batch</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">memberRef</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">doc</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">''</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">demoFamily</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">members</span><span style="color:#F07178;">[</span><span style="color:#BABED8;">i</span><span style="color:#F07178;">])</span></span> 375<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 376<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">batch</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">commit</span><span style="color:#F07178;">()</span></span> 377<span class="line"></span> 378<span class="line"><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">/*Reading our saved data with a query*/</span></span> 379<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">querySnapshot</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">await</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">memberRef</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">where</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">role</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">==</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Child</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">()</span></span> 380<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> []</span></span> 381<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">querySnapshot</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">doc</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">doc</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">data</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#F07178;">))</span></span> 382<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">alert</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Only children: </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">list</span><span style="color:#F07178;">)</span></span> 383<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span> 384<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span> 385<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span> 386<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">></span></span> 387<span class="line"></span></code></pre></div>`,74)])])}const B=n(p,[["render",t]]);export{i as __pageData,B as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.