Transform Firestore JSON data into a TypeScript array

Question

Transform Firestore JSON data into a TypeScript array

Extracting and formatting data from Firebase for visualization purposes can be challenging after successfully working with it in HTML. I am currently dealing with a FirebaseListObservable that contains three value-types, but only one of them needs to be included in the array for visualization. How can I effectively convert a FirebaseListObservable to an array using TypeScript?

I need to convert the data in order to create graphs within my app.

Here is the TypeScript code for retrieving the data:

this.measure = this.db.list('/Users/' + this.username + '/Measure');
enter code here

And here is the TypeScript code for implementing chartjs:

this.data = [12, 24, 91, 23]

The goal is to populate 'this.data' array with the actual data retrieved from Firebase.

arrays json typescript firebase ionic-framework

Answer 1

Answer №1

To start, create an empty array called data=[];

Next, retrieve the data using .subscribe()

this.db.list('/Users/'+this.username+'/Measure').subscribe(measures => {
    measures.forEach(measure => {
      this.data.push(measure.number);//.number refers to your specific field in firebase
    })
  })

This code will fetch all the lists, iterate through each item, and add the desired values to the array.

Answer 2

To start, create an empty array called data=[];

Next, retrieve the data using .subscribe()

this.db.list('/Users/'+this.username+'/Measure').subscribe(measures => {
    measures.forEach(measure => {
      this.data.push(measure.number);//.number refers to your specific field in firebase
    })
  })

This code will fetch all the lists, iterate through each item, and add the desired values to the array.

Answer 3

Answer №2

The FirebaseListObservable represents an observable object. This means that upon subscribing to it, you will receive the actual list itself, which in this case is the array containing the desired data.

this.measurementData: FirebaseListObservable<Measure[]> = this.db.list('/Users/'+this.username+'/Measure');
this.measurementData
    .map(data => data.numbers) // extract only the numbers field to get an array of arrays
    .map(numberArrays => numberArrays.reduce((current, previous) => current.concat(previous))) // concatenate all arrays into a single one
    .subscribe(numbersArray: number[] => {
        console.log(numbersArray);
    });

interface Measure {
    date: Date;
    location: string;
    numbers: number[];
}

Answer 4

The FirebaseListObservable represents an observable object. This means that upon subscribing to it, you will receive the actual list itself, which in this case is the array containing the desired data.

this.measurementData: FirebaseListObservable<Measure[]> = this.db.list('/Users/'+this.username+'/Measure');
this.measurementData
    .map(data => data.numbers) // extract only the numbers field to get an array of arrays
    .map(numberArrays => numberArrays.reduce((current, previous) => current.concat(previous))) // concatenate all arrays into a single one
    .subscribe(numbersArray: number[] => {
        console.log(numbersArray);
    });

interface Measure {
    date: Date;
    location: string;
    numbers: number[];
}

Transform Firestore JSON data into a TypeScript array

Answer №1

Answer №2

Similar questions

Converting a multidimensional array into a JSON array using PHP: A step-by-step guide

The value of an Angular rxjs BehaviorSubject can be updated using the value property directly, without calling

Getting information in JSON format

Typescript type for selecting only string[] keys in an object

Error message in MongoDB Compass: JSON input terminated unexpectedly

Having trouble accessing JSON values in FullCalendar with Struts2

Verifying email availability using VB.NET WebMethod, JSON, and CustomValidator

PHP: Conversion of data types and modifying elements within a foreach loop

Exploring the usage of intervalTimer with async and fakeAsync functions

What is the best way to structure JSON data in JavaScript in order to effectively utilize a service?

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

Nested mapping of objects in a mapped object

Dynamically removing buttons with JQuery

Encountering Typescript issues while trying to access @angular/core packages

React with Typescript - cannot be expressed as a function

I am interested in creating a checkbox filtering system using Angular

Generating JSON data with Express.js and MySQL

I am encountering challenges with submitting the form

What is the significance of requiring a specific string in a Typescript Record when it is combined with a primitive type in a union?

Creating an index for a JSONB column in Postgres that contains an array of JSON values