CODEWITHSUNDEEP
javascriptangulartypescriptfirebasefirebase-realtime-database
Mar
Mar

Reputation: 85

How to turn a firebase REST API response into an array in typescript?

I'm currently having a problem processing response data I've made to my firebase realtime database using REST in my Angular app. Just to preface: I'll be honest. I'm slowly learning both angular and firebase.

I have a child route in my database called "pending-orders"

https://i.sstatic.net/ytwEs.png

Each unique ID there matches the logged user that made the purchase order at the time.

To acquire all of my pending orders, I'm sending a GET http request to my database, the endpoint being pending-orders.json just as the firebase documentation suggests.

This gives me a response which, I assumed, was going to be an array. But instead is an object with nested objects. I logged the response, which is:

{G2v12VlKwNPXwtUDV4g41PIqHZx1: {…}, hYgflcf7WGR6wLrCPkAL1B4MbZI3: {…}}

What I need though is an array which contains the children (the values of the keys in that response object). I am not completely sure how to get one. How does one go about accomplishing this?

As an aside...

In fact, I am not even sure how I'd go about extracting a child node whose unique ID has been generated by firebase itself (through a POST request).

Unless I skipped something in the documentation for REST APIs, they cover how newly inserted child nodes get their own unique ID via POST requests, but later don't discuss how to access those child nodes particularly or via collections (like I'm trying to do). The client has no way of knowing those unique ids (or the custom ids I generated myself), as far as I'm concerned.

Upvotes: 7

Views: 938

Answers (2)

Mar
Mar

Reputation: 85

Going on the vein of Jay Codist's comment, I've done the following to build my own array of ProcessedOrders based on the response data I get from firebase. The solution I came up with is as follows:

fetchPurchaseOrders(): void {
this.http
  .get('https://APP-NAME.firebaseio.com/pending-orders.json')
  .subscribe((res) => {
    if (res) {
      const processedOrders: ProcessedOrder[] = [];
      for (const [key, value] of Object.entries(res)) {
        processedOrders.push(value as ProcessedOrder);
      }
      console.log(processedOrders);
    }
  });

}

This allows me to save the orders without caring about the custom ID I set to each child node in the database. The console.log() there enables me to print out all the orders as I wanted. This means that array of ProcessedOrders can now be used in-app however I want.

I can't help but wonder that I may have bleep'd my data structure by not thinking it through properly. This approach will be great if I just want to see the orders, but not so much if I want to update any info on them from an administrative side, since I'll still have to rely on the custom ID I initially gave them.

I might also take the time to learn AngularFire as other commenters have suggested. Maybe it'll be better and easier to figure out than REST API.

Anyway. The issue has been resolved, as the original intent of my question was how to turn a response into an array.

Thank you everyone trying to help!

Upvotes: 0

Sean Vieira
Sean Vieira

Reputation: 159995

Since TypeScript is just JavaScript, you can do things like:

const pendingOrdersResponse = await firebase.handwaving.pendingOrders();
const pendingOrdersTransformed = Object.keys(pendingOrdersResponse).map(id => {
  return { uuid: id, ...pendingOrdersResponse[id] };
});

Then pendingOrdersTransformed will be an array with your data as plain-old-JavaScript objects in the array and the generated ID as the uuid field on each pendingOrder in the array.

Upvotes: 3

Related Questions