Submitting the object in the correct format for the Firebase database

My goal is to structure the Firebase database in the following way:

"thumbnails": {
    "72": "http://url.to.72px.thumbnail",
   "144": "http://url.to.144px.thumbnail"
}

However, I am struggling to correctly set the keys '72' and '144' as they are calculated values before being pushed to the db, representing the pixels of an image.

let pixel = this.calcPixels();

let obj = ?????

var updates = {};
updates['/guid/thumbnails/'] = obj;

let masterRef = this.db.database.ref();
masterRef.update(updates);

I attempted the following approach, but it doesn't work as intended:

let obj = { pixel : this.getUrl()}

Creating a class for sending data also presents an issue where the class members (pixelx, urlx) become the key on the server.

class PixelData{
  pixelx:number;
  urlx:string;

  constructor(p:number,u:string){
    this.pixelx = p;
    this.urlx = u;
  }
}

As a result, setting this obj produces the following output when pushed to the Firebase database under thumbnails:

"thumbnails": {
  "pixelx": 72
  "urlx": "http://url.to.72px.thumbnail",
}

Any suggestions or solutions would be greatly appreciated. Thank you.

Answer №1

Simply update

let obj = { pixel : this.getUrl()}

to

let obj = { [pixel] : this.getUrl()}

By doing so, the code will now reference the value of the pixel variable instead of treating it as a string in your scenario.

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

Before proceeding to update in Angular 8, ensure the repository is not dirty. Commit or stash any changes that have been

Encountered an Issue The repository is not clean. Please commit or stash any changes before updating. When upgrading from version 7 to Angular 8, I faced this error. To find out more about the upgrade process, you can visit the Angular Guide for Upgra ...

What is the process for declaring a module in order to perform named imports?

Currently, I am utilizing graphql-tag in my project. The structure of my files is as follows: ./operation.graphql Query User { ... } ./test.ts import { User } from './operation.graphql'; /// Module ''*.graphql'' has no ...

Absolute file path reference in Node.js

I'm working on a Node.js project using WebStorm IDE. Here's the structure of my project: The root folder is named "root" and inside are 2 folders: "main" and "typings". The "main" folder has a file called "foo.ts", while the "typings" folder co ...

Include a string in every tuple

I am trying to define a new type: type myNewType = 'value-1' | 'value-2' | 'value-3' Is there a way to create another type like this? type myNewType2 = '1' | '2' | '3' However, I want the outpu ...

execute a rigorous compilation during the ng build angular process

I am currently working on a project using angular-cli and I have configured my package.json with the following scripts: "scripts": { "ng": "ng", "build": "ng build --base-href /test/", "prod": "ng build --prod --base-href /test/" } According to the ...

Is it necessary for TypeScript classes that are intended for use by other classes to be explicitly exported and imported?

Is it necessary to explicitly export and import all classes intended for use by other classes? After upgrading my project from Angular 8 to Angular 10, I encountered errors that were not present before. These issues may be attributed to poor design or a m ...

What is the best way to find a partial string match within an array of objects when using Jest?

I am currently utilizing the following versions: Node.js: 9.8.0 Jest: 22.4.2 A function called myFunction is returning an array structured like this: [ ... { id: 00000000, path: "www.someUrl.com/some/path/to" } ... ] I ...

Build a unique array of identifiers extracted from an object

https://i.sstatic.net/PaFXj.png I am seeking advice on how to extract an array of IDs values by iterating through an object in React JS. https://i.sstatic.net/GV6ga.png const initialState = useMemo(()=> { return dataTable.filter(result => f ...

Error TS2694 is being caused by Electron Typescript Material-UI withStyles because the namespace "".../node_modules/csstype/index"" does not have an exported member called 'FontFace'

While I am experienced with Material-UI, I am relatively new to Electron and using React, TypeScript, and Material-UI together. Recently, I encountered an error while attempting to create an electron boilerplate code for future project initialization. Init ...

Can you explain the purpose and functionality of the following code in Typescript: `export type Replace<T, R> = Omit<T, keyof R> & R;`

Despite my efforts, I am still struggling to grasp the concept of the Replace type. I have thoroughly reviewed the typescript documentation and gained some insight into what is happening in that line, but it remains elusive to me. ...

Angular2 - Showing parameters in modal interface

I am working on an Angular5 app and have a component.html file with a function called markerClick that opens a modal. However, I am facing challenges in displaying the item.lat parameter in the modal and would appreciate your assistance. Below is the code ...

"Error encountered while running a build for Next.js with CI set to

Encountering an issue while trying to build the nextjs application. After running npm run build, the following error persists. Any ideas on what might be causing this? package.json { "name": "mobills-indica", "version": "1.0.0", "scripts": { "i ...

What TypeScript syntax is similar to Java's "? extends MyClass" when using generics?

How can we indicate the TypeScript equivalent of Java's ? extends MyClass? One possible way to achieve this is: function myFunc <TComponent extends MyBaseClass>(param: ComponentFixture<TComponent>) {} Is there a more concise alternative ...

Definitions for nested directories within a main index.d.ts

We have developed custom typings for the latest version of material-ui@next and successfully included them in the library during the last beta release. For those interested, you can access the index.d.ts file here. However, there seems to be a problem wi ...

Tips for utilizing [(ngModel)] with an object that is empty, null, or undefined in Angular 4

When trying to assign [(ngModel)] inside my .html code to an empty (null or undefined) object, I encountered the error message _co.object is null. There are two scenarios: one where the object has a value and one where it does not. The ngModel works fine i ...

Creating a progressive prototype chain in TypeScript: A step-by-step guide

With JavaScript, it is possible to create a "derived class" whose "base class" is dynamic using code like the following: function NewBaseClass(sF) { function DynamicBaseClass(iF) { this.instanceField = iF; } // EDIT: oops, this is not really static i ...

Best practices for organizing an array of objects in JavaScript

I have an array of objects with nested arrays inside, and I need to restructure it according to my API requirements. [{ containerId: 'c12', containerNumber: '4321dkjkfdj', goods: [{ w ...

Splitting Ngrx actions for individual items into multiple actions

I'm currently attempting to create an Ngrx effect that can retrieve posts from several users instead of just one. I have successfully implemented an effect that loads posts from a single user, and now I want to split the LoadUsersPosts effect into ind ...

Angular 5 error: Decorators do not support function expressions

I am struggling to compile my angular project using the command ng build --prod The issue arises in the IndexComponent : index.componenent.ts import { Component, OnInit } from '@angular/core'; import { indexTransition } from './index.anim ...

The exploration of child routes and modules

I'm currently working on a somewhat large project and I've decided to break it down into modules. However, I'm facing an issue with accessing the routes of admin.module.ts. In my app.module, I have imported the admin Module. imports: [ Br ...