Fetching a collection from Cloud Firestore using Angular and Firebase

I'm looking to figure out how to retrieve lists from cloud firestore.

Here is how I upload a list :

export interface Data {
  name: string;
  address: string;
  address2: string;
  pscode: string;
  ccode: string;
  name2: string;
}

constructor(private afs: AngularFirestore){
    this.notesCollection = this.afs.collection(`imones`, (ref) => ref.orderBy('time', 'desc').limit(5));
}

  notesCollection: AngularFirestoreCollection<Data>;

//creating item in list (imones)

createItem(){
  this.notesCollection.add(this.busines);
}

Now, the question arises on how to fetch all the items from that list?

This is my attempt :

constructor(private afs: AngularFirestore){
  this.items = this.notesCollection.valueChanges();
}
  items: Observable<Data[]>;

HTML :

 <p *ngFor="let item of items">{{item.name}}</p>

Error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Another error :

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

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

Answer №1

Can you really loop through an observable in your template in this manner? I believe a different approach might be more appropriate:

constructor(private afs: AngularFirestore){
  this.notesCollection.valueChanges().subscribe(items => this.items = items);
}
  items: Data[];

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

How to link an external CSS file to a Vue.js project

I created a new project using @vue/cli and now I want to add an external CSS file to my App.vue Here's what I attempted: <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | ...

What is the best way to retrieve data from a jQuery AJAX call when it returns?

function isNewUsername(str){ var result; $.post('/api/isnewusername', {username:str}, function(data) { result = data.result; }, "json"); return result; } I am encounte ...

Using async/await keywords in React Native while iterating through an array and calling an API does not result in successful resolution

When attempting to request data from my API in this manner: export default ({ navigation }) => { // Call getMovieImages with the id of the likedMovies from the state.likedMovies const { getMovieImages, state:{ likedMovies }} = useContext(MovieContext); ...

Issue with Highcharts: Border of stacking bar chart not visible on the right side

When creating a stacking bar chart, I noticed that the rightmost 'box' does not have a border drawn on the right side. Is there a setting or option in Highcharts that can be used to ensure the white border line is drawn around the 75% box in the ...

Having trouble rendering an object in my ThreeJS project. The error message says: "THREE.OBJLoader: Unexpected line: 'usemap glass'"

I encountered an error while running threejs in an angular 8 application. The objective is to load an object, for which the object and material files were obtained from Kenney assets. Despite referencing examples on the official threejs site and other onli ...

A curious phenomenon observed in the behavior of the jQuery offset() method

Once I executed the following code snippet multiple times: $view.offset({ left : X, //X remains constant top : this.y }); console.log($view.offset()); //displays expected output I noticed (using Firebug) that the HTML code looked like this: <di ...

Tips for deleting an image file, or any file, from a Node.js Express server

Being a novice in the field of web development, I decided to embark on creating a basic E-commerce application as my first project. I managed to make good progress until I hit a roadblock while trying to remove an image file of a product: I utilized expres ...

Responsive menu not collapsing properly and appearing funky in Drupal

I've managed to create a responsive navigation bar, but I'm encountering two issues. Firstly, when I resize the screen on my test pages, not all of the links hide as expected. Secondly, after inserting the code into Drupal, the nested links appea ...

Switching the Require statement to an Import statement led to an error popping up

Currently, I am exploring the use of Ajv with typescript. import { Ajv } from "ajv"; let ajv = new Ajv({allErrors: true}); I have encountered an error and I'm unsure why it is occurring: [ts] 'Ajv' only refers to a type, but is being u ...

Vue not displaying local images

I'm having trouble creating an image gallery with Vue.js because local images are not loading. I have the src attributes set in the data attribute and can only load images from external sources. For example: data() { return { imag ...

Angular: Showing the Gap between Basic Elements within an Array in the Template

I've been working on displaying a nested JSON object in a table, where there is an array of strings like obj.someKey = ['a','b','c']. Currently, I am directly showing the array content in the td tag of the table. <td ...

the append function combines existing data with new data

After retrieving data through ajax, I am facing a challenge in displaying it within a UI popup: [{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"}, {"BadgeImage":"http:\/\/lo ...

Transferring data from two child components back to the parent component

Within my web application, I have a parent component (A) and two children components (B, C). The parent component is responsible for maintaining the basic layout of the page, which remains consistent across all layouts. However, I need to dynamically swap ...

Displaying complex JSON data in an HTML format using JavaScript

How can I convert the second array of entities into an HTML format from the JSON data using a for loop or similar method? To access the necessary data, I currently use console.log(data.response[0].entities.urls); $(document).ready(function () { $.getJSO ...

Enhancing many-to-many relationships with additional fields in Objection.js

I have a question that I haven't been able to find a clear answer to in the objection.js documentation. In my scenario, I have two Models: export class Language extends BaseId { name: string; static tableName = 'Languages'; st ...

In Javascript, you can enhance your axes on a graph by adding labels at both the

Is there a way to add labels at the beginning and end of the axes to indicate the importance level, such as "not very important" and "very important"? I am currently utilizing a slider program from here. Since I am new to JavaScript, I would greatly appre ...

V5 Modal & jQuery: troubleshooting the spinner problem during loading of content

I'm working on displaying a spinner while loading modal content with the use of bootstrap v5 modal and jQuery. However, I encountered some issues in my example. The spinner does not display again after closing the modal; it only shows for the first t ...

Creating dynamic content within Angular 2 components by utilizing innerHTML

As I work on documenting a component library, my goal is to have one string of HTML that not only displays the component on the page but also includes documentation for it. This is what I want: https://i.stack.imgur.com/bjp5u.png However, this is what I ...

Ways to transfer a state from the child component to the app component

I have 2 different components that contain sub-components within them. In one of these components, I'm trying to figure out how to transfer the click event from the sub-component to another component so that it can render an entirely new component for ...

What is the primary objective of the Angular Elements feature in Angular version 6?

One of the most intriguing features in Angular 6 is Angular Elements, which enables us to convert Angular Components into native Web Components. This means we can utilize them as web components in any framework, such as React or Vue. A critical question a ...