Developing with Angular and Firebase: Setting up a new data node

Is there a way to create a new node called terriangen, add a key, and set the object data in Firebase?

-usernames  
 -{UID}    
  -mylibrary      
   -{key}    
  -terriangen       
   -{key}        
    type:mountain         
    name:1.png

This is the code I currently have:

const newObjRef = firebase.database()
              .ref('usernames')
              .child(userId)
              .child('mylibrary/')
              .push();
            newObjRef.set({
              type: terrainType,
              name: terrainName
            });
angulartypescriptfirebasefirebase-realtime-database

Answer №1

If you need to update multiple locations simultaneously, here is how it can be done:

const newKey = firebase.database().ref().push.key;
const updates = { };
updates["mylibrary/"+key] = {
          type: terrainType,
          name: terrainName
        };
updates["terriangen/"+key] = {
          type: terrainType,
          name: terrainName
        };
firebase.database()
        .ref('usernames')
        .child(userId)
        .update(updates)

The key points of this approach include:

  • A unique key is generated beforehand to use in both target locations
  • The path of the new data is incorporated into the keys for a multi-location update. This method prevents overwriting any existing items in the library and terriangen nodes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The 'subscribe' property is not available on the type '() => Observable<any>'

File for providing service: import { Observable } from 'rxjs/Rx'; import { Http, Response} from '@angular/http'; import { Injectable } from '@angular/core'; import 'rxjs/add/operator/Map'; @Injectable() export clas ...

angulartypescriptrxjsobservableangular2-services

Material Angular table fails to sort columns with object values

Currently, I am in the process of developing a web application using Angular Material. One of the challenges I have encountered is displaying a table with sorting functionality. While sorting works perfectly fine on all columns except one specific column. ...

javascripthtmlangulartypescriptangular-material

Does Angular come with default responsiveness?

My Angular 4 application is not responsive and I am looking for solutions: 1. Does the latest version of Angular come with default responsiveness? 2. What would be the optimal method to make an Angular 4 application responsive - Bootstrap, media queries, ...

angularresponsive-designresponsive

What is the proper way to bring in Typescript types from the ebay-api third-party library?

My TypeScript code looks like this: import type { CoreItem } from 'ebay-api'; declare interface Props { item: CoreItem; } export default function Item({ item }: Props) { // <snip> } However, I encounter an issue when trying to build ...

typescriptnext.js

Displaying Asynchronous Error Messages with the toast.error Function in React

I have successfully integrated an asynchronous login thunk with error handling. While the success message displays correctly, the error message is not appearing as expected. export const loginThunk = createAsyncThunk( 'login', async (credenti ...

reactjstypescriptreduxredux-toolkit

The service is sending back an object and ngFor is having trouble accepting data in object format

I am currently developing an Angular Application in which I am attempting to display some information in the DOM. However, I am encountering an error with ngFor not accepting object format data. My goal is to iterate over the data. The error message rea ...

angularangular6

Can the order of event bubbling be altered in JavaScript?

I have three boxes in my HTML, each with its own click events. Currently, when I click on a child element, event bubbling occurs in the order of C->B->A. However, I am curious to see if it's possible to change the event bubbling order to C-> ...

javascripthtmlangular

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

javascripthtmlasp.netangulartypescript

Creating a loader for a specific component in Angular based on the view

Creating a loader for each component view is crucial when loading data from an API. Here is the current structure of my components within my <app-main></app-main>: <app-banner></app-banner> <app-data></app-data> <app ...

htmlcssangularcomponentsloader

Modify a particular attribute in an array of objects

I am currently working on an Angular project and dealing with the following array object: { "DATA": [ { "CUSTOM1": [ { "value": "Item1", ...

angulartypescript

Tips for populating an array with Firestore Objects

I am currently working on developing an e-book application using Firebase and Firestore. This is how the database structure looks: books Book1 -title:abc -category:123 -description:123 Book2 ...

javaandroidarraysfirebasegoogle-cloud-firestore

Listening for Angular 2 router events

How can I detect state changes in Angular 2 router? In Angular 1.x, I used the following event: $rootScope.$on('$stateChangeStart', function(event,toState,toParams,fromState,fromParams, options){ ... }) In Angular 2, using the window.addEv ...

javascriptangulartypescriptangular2-routing

What is the best way to deliver a file in Go if the URL does not correspond to any defined pattern?

I am in the process of developing a Single Page Application using Angular 2 and Go. When it comes to routing in Angular, I have encountered an issue. For example, if I visit http://example.com/, Go serves me the index.html file as intended with this code: ...

angularjsgotypescriptangularservemux

Creating a type-safe dictionary for custom theme styles in Base Web

In my Next.js project, I decided to use the Base Web UI component framework. To customize the colors, I extended the Theme object following the guidelines provided at . Interestingly, the documentation refers to the theme type as ThemeT, but in practice, i ...

reactjstypescriptbaseweb

Sharing enums between client and server code in Webpack is a smart way to improve

I'm currently working on a project setup that looks like this: | |--public-|file1.ts | |enum.ts | |--server/file2.ts | The issue I am facing is incorporating the enum defined in enum.ts into both file1 and file2. While file1 can import and u ...

node.jstypescriptwebpacktypescript-typings

React-table fails to show newly updated data

I am facing an issue with my react-table where real-time notifications received from an event-source are not being reflected in the table after data refresh. https://i.stack.imgur.com/q4vLL.png The first screenshot shows the initial data retrieval from th ...

reactjstypescriptnext.jsreact-table

Queries with MongoDB RegEx fail to return any matches if the search string contains parentheses

When trying to implement case-insensitivity using regex, it seems to work well for plain strings. However, if special characters like parenthesis are involved in the search query for the name, the database returns no results. For example, a search for "Pu ...

javascripttypescriptmongodbmongoose

Issues with JSONPATH in typescript failing to grab any values

Searching for a specific config item validity using JSON path can be achieved by specifying the key name condition. This process works seamlessly on platforms like , accurately extracting the desired value: https://i.sstatic.net/2ffAAnNM.png In Typescrip ...

typescriptjsonpath

Is it possible to modify the parameters of a function by utilizing a MethodDecorator without affecting the "this" value?

Consider a scenario where you need to dynamically modify method arguments using a decorator at runtime. To illustrate this concept, let's simplify it with an example: setting all arguments to "Hello World": export const SillyArguments = (): MethodDec ...

javascripttypescriptecmascript-6typescript-decorator

Accessing data in vuex can result in Firebase SnapShot.val() returning null

I am developing an application that allows access for students, staff, and non-teaching staff. Here is how my form data is structured: formData: { name: "", email: "", password: "", select: null }, options: ["Student", "St ...

javascriptfirebasevue.jsfirebase-realtime-databasevuex