Guide on how to retrieve the information stored in an object

Question

Guide on how to retrieve the information stored in an object

I am experiencing an issue with my function that retrieves data from Firebase. I am able to read the objects, but I cannot access the properties within them.

Whenever I try to parse the content, an error occurs.

Here is the function in question:

 this.afAuth.authState.subscribe(data => {
            this.itemsList = this.afDatabase.list(`oders/${data.uid}`).valueChanges();
            
            console.log(this.itemsList)
            this.itemsList.forEach(data =>{
              console.log(data) // this works
              console.log(data.name) // this doesn't work (undefined in console)
            })
          })

This is the JSON OBJECT:

(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {hour: 1567395936608, id: 0, name: "Salami", price: "8"}
1: {hour: 1567395936608, id: 9, name: "Suplémment Fromage", price: "8"}
2: {hour: 1567395936608, id: 4, name: "bolo", price: "8"}
3: {hour: 1567395936608, id: 4, name: "bolo", price: "8"}
4: {hour: 1567395985542, id: 4, name: "bolo", price: "8"}
5: {hour: 1567395985542, id: 0, name: "Salami", price: "8"}
6: {hour: 1567395985542, id: 9, name: "Suplémment Fromage", price: "8"}
7: {hour: 1567397849623, id: 6, name: "Dems", price: "15"}
8: {hour: 1567397849623, id: 0, name: "Salami", price: "8"}
9: {hour: 1567397849623, id: 9, name: "Suplémment Fromage", price: "8"}
10: {hour: 1567398309241, id: 0, name: "Salami", price: "8"}
11: {hour: 1567398309241, id: 9, name: "Suplémment Fromage", price: "8"}
12: {hour: 1567402336588, id: 0, name: "Salami", price: "8"}
13: {hour: 1567402336588, id: 9, name: "Suplémment Fromage", price: "8"}

Thank you!

angular typescript firebase

Answer 1

Answer №1

To iterate over the elements in the `data` array, which is an array itself, you will need to use another loop.

One way to do this is:

this.itemsList.forEach(data =>{
    this.data.forEach(e=>{
        console.log(e.name) 
    })
})

Alternatively, you can try:

this.itemsList[0].forEach(data =>{
    console.log(data.name) 
})

Answer 2

To iterate over the elements in the `data` array, which is an array itself, you will need to use another loop.

One way to do this is:

this.itemsList.forEach(data =>{
    this.data.forEach(e=>{
        console.log(e.name) 
    })
})

Alternatively, you can try:

this.itemsList[0].forEach(data =>{
    console.log(data.name) 
})

Answer 3

Answer №2

Implementing the spread operator method.

[...this.itemsList].forEach(item) {
 console.log(item.hour);
}

Answer 4

Implementing the spread operator method.

[...this.itemsList].forEach(item) {
 console.log(item.hour);
}

Guide on how to retrieve the information stored in an object

Answer №1

Answer №2

Similar questions

Tips for accessing data from a local JSON file in your React JS + Typescript application

Angular 7 application encountering error 500 with URL Rewrite Module on IIS7 server

Navigating to a child route from a parent component in Angular using the navigate method: A step-by-step guide

Error occurs when attempting to test both boolean and number data within an ngIf statement

I recently updated all my projects to Angular 14, but when I tried to install a package using `npm i`, it still

Surprising literal found at the second position

Guide to Re-rendering a component inside the +layout.svelte

What is the reason behind useEffect giving warnings for unnecessary fields that are not included in the dependencies array?

What is causing the issue where search query parameters are not recognizing the initially selected option?

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

Issues persist with debugger functionality in browser development tools following an upgrade from Angular 8 to version 15

Organize the attributes of components on the following line in Visual Studio Code

What is the most effective method for updating edited rows in a DataGrid MUI and transferring them to

Using Typescript to override an abstract method that has a void return type

Angular 5 dynamically updates its model after the completion of events

Experiencing a specific build error on cloud build that does not occur during a docker build process

Looking for a way to make certain pages in Vue3 accessible without authentication using KeyCloak-js

When working with the Sequelize-Typescript One To Many Association and Repository, a situation may arise where the query returns only one child entity even though there are multiple

Sorting arrays in Typescript

Creating an Account with Firebase