Loop over elements retrieved from Firebase using ng-repeat

I am currently attempting to iterate through items retrieved from Firebase using ngrepeat. Although I can see the items in the console, the expressions are not working as expected. I have tried various solutions, but nothing seems to be working. Any assistance or guidance would be highly appreciated. Thank you.

Attached is an image of the console:

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

//js
firebaseRef.once("value", function(snapshot) {
    $timeout(function(){
        $scope.boats = snapshot.val();
        console.log($scope.boats); //image of console up^
    }, function (errorObject) {
        console.log("The read failed: " + errorObject.code);
    },0);
});

//html
     <div class="row pad" ng-repeat="boat in boats">
        <span class='text-center' >{{boat.title}}</span>
     </div>
javascriptangularjsfirebase

Answer №1

Stored in the system as boat.Title, however it is being retrieved as boat.title

Answer №2

@funador is right, you should use boat.Title instead of boat.title.

Consider using AngularFire for Angular 1 for a smoother experience.

AngularFire syncs collections with the Firebase database and the $digest loop.

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .controller('MyCtrl', MyController)
  .config(function($firebaseRefProvider, FirebaseUrl) {
     $firebaseRefProvider.registerUrl({
       default: FirebaseUrl,
       boats: FirebaseUrl + '/boats'
     });
  });

function MyController($scope, $firebaseRef, $firebaseArray) {
  $scope.boats = $firebaseArray($firebaseRef.boats);
}

With AngularFire, define your references in the config phase using $firebaseRefProvider, making it easy to inject the $firebaseRef service.

A $firebaseArray will update your template automatically. Simply pass in boats as the array reference.

No more need for $timeout. AngularFire takes care of that for you.

Your ng-repeat remains unchanged:

<div class="row pad" ng-repeat="boat in boats">
  <span class='text-center' >{{boat.title}}</span>
</div>

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

Remove an array key from a MongoDB collection

I am currently working with mongoDB and my JSON data (stored under the table name "student") appears as follows: [{ name : "John", subjects:["English", "Maths"] }, { name : "Winsel" ...

javascriptnode.jsmongodbmongodb-querysails.js

Shorten a value within an array of objects using JavaScript

How can I truncate a value in an array of objects based on specific criteria? Let's use the following example: var items = [ { name: "CN=arun, hjsdhjashdj,jsdhjsa,kshd", status: "Present" }, { name: "CN=manohar, abcdefghij,111111,2222222", s ...

javascriptarraysobject

Issues arise when attempting to enforce type-safety in TypeScript while using the JSON.parse

Is it possible that type-safety is compromised in TypeScript when dealing with JSON parsing? I should be triggering an error, but I'm not: interface Person { name: string } const person: Person = somePossibleFalsey ? JSON.parse(db.person) : undefi ...

javascriptjsontypescripttype-safety

Unleashing the power of jQuery ajax without requiring a server

I've been incorporating jQuery ajax calls on my HTML pages. $.ajax({ url: 'search/' + page + '.html', dataType: 'text', success: function(data) { $(".searchData").html(data); $(".searchData"). ...

javascriptjqueryajax

Utilize the skipAuthorization feature when making requests with Restangular to bypass the authorization

Currently, I am using Satellizer to manage authentication on my application. By default, Satellizer intercepts all requests and includes the Authorization header. While I use Restangular for all API calls, I do not want the Authorization header to be inclu ...

angularjsrestangularsatellizer

The function `res.json()` is being called before the for loop has completed its execution

I am facing an issue with my application where the endpoint is supposed to fetch data from a MongoDb Database and return the results to the client. However, I am encountering a problem where an empty array is being sent before my for(){} loop finishes exec ...

javascriptnode.jsmongodbexpressmongoose

Pause for a moment before displaying the VueJS loading screen

When using VueJS, I have implemented a loader to be displayed on each route like this: router.beforeEach((to, from, next) => { store.commit('loading', true); next(); }) However, it seems unnecessary to show the loader for a request that ...

javascriptvue.jsvuex

Use PipeTransform to apply multiple filters simultaneously

Is it possible to apply multiple filters with PipeTransform? I attempted the following: posts; postss; transform(items: any[]): any[] { if (items && items.length) this.posts = items.filter(it => it.library = it.library ...

javascriptangulartypescriptionic-frameworkionic2

What is the best method to retrieve a secure httponly cookie in a Next.js application?

Our next JS application is making a request to The backend team has configured the response cookie as a secure HttpOnly cookie. const session = await ( await fetch( `https://demo.com/auth/session`, requestOptions )).json(); console.log(&qu ...

javascriptreactjscookiesnext.jshttpcookie

Dynamic data binding in AngularJS with dynamically generated views

The scenario: Currently, I am constructing a wizard in AngularJS that contains tabbed content with each tab representing a step in the wizard. These steps are fetched from the database through a Laravel controller and displayed using ng-repeat. Each tab c ...

javascriptphpangularjsvalidationlaravel-4

How can I achieve the function of // @codekit-prepend "" with gulp?

I have recently started using gulp and I am familiar with codekit where I used to write // @codekit-prepend "foo.js" // @codekit-prepend "bar.js" to concatenate js files. Can someone guide me on how to achieve the same result with gulp? Below is the ...

javascriptnpmgulp

javascript hide rows without data

I have a knack for tweaking existing code to suit my needs, but I'm not very proficient in writing my own from scratch. That being said, here's my current dilemma. My pool league uses a Google sheet to manage a variety of statistics, and with so ...

javascriptjqueryjsongoogle-sheets-api

Utilizing React: passing a Component as a prop and enhancing it with additional properties

My question involves a versatile component setup like the one below const Img = ({ component }) => { const image_ref = useRef() return ( <> {component ref={image_ref} } </> ) } I am exploring ways to use this compo ...

javascriptreactjsreact-propsreact-component

How can the selected value be shown in the dropdown menu after moving to a different webpage in HTML?

My application features 4 roles displayed in a dropdown menu. When a specific role is clicked, it should go to the corresponding href link that was specified. However, I encountered an issue where after navigating to the second HTML page, the selected rol ...

javascriptjqueryhtmldropdown

Guide to interpreting an Angular expression using traditional JavaScript conventions

I have encountered an issue with the Angular app that I am currently working on. It needs to retrieve the Google Analytics ID from Angular in order to pass it to ga('create', 'UA-XXXXX-Y') using standard JavaScript in my index.html. &l ...

javascripthtmlarraysangularjsgoogle-analytics

What is the process for uploading an image and entering text into the same row in Google Sheets?

Hello, I am currently working on a Google Script web app that enables users to upload 10 photos along with comments for each photo. This information will then be inserted into a Google Sheet when the user clicks the 'upload' button on the web app ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

The issue of onClick failing to function when paired with the addEventListener for the

Looking into a react component for a profile button that opens a menu with three options: My Profile, Settings, and Logout. The issue seems to be with the onClick event on the a tags not working as expected (the console.log is not being printed). Interes ...

javascriptreactjsnext.js

Connecting an AngularJS directive to a controller

I'm in the process of learning AngularJS directives and facing a challenge. Here's the JSFiddle link to an example I'm working on: https://jsfiddle.net/7smor9o4/ In the example, my expectation is for the vm.alsoId variable to match the valu ...

javascriptangularjsangularjs-directiveangularjs-bindings

Handle empty response from endpoint response

I'm facing an issue with a method that subscribes to an endpoint for a response. In some cases, the endpoint returns null and I need to handle this scenario. public list: Array<any>; this.GetList(this.getListRequest) .subscribe( (resp) =& ...

javascriptangulartypescript

Encountering an error with Next.JS when using the "use client" directive

Recently encountered a bizarre issue with my next.js project. Every time I input "use client"; on a page, it triggers a "SyntaxError: Unexpected token u in JSON at position 0". Here's the code snippet for reference: "use client" ...

javascriptreactjsnext.js