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:

//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

Error encountered: X.setValue is not a valid function and cannot be used to set the value. However, manually inputting the value as a

When I try to use the line sseTopicString.setValue(sseValueNumber), a Type error is thrown: Uncaught TypeError: sseTopicString.setValue is not a function. Interestingly, if I output the value (string) of sseTopicString before the dot, everything works fin ...

javascriptnode.jsexpressserver-sent-eventsgauge

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

Why is the view not reflecting the updates made to the model?

I recently started delving into Angular JS and have been following tutorials to learn it. One issue I'm facing is that my model doesn't seem to update the view. Can anyone help me figure out why this is happening? Here is the code snippet: < ...

javascriptangularjsangularjs-directiveangularjs-scope

Using axios to call a web API method from within a ReactJS web worker

Currently, I am utilizing Web Worker alongside ReactJS (Context API schema) and encountering a particular issue. The design of my Web API and Context is outlined below: WebWorker.js export default class WebWorker { constructor(worker) { let code = ...

javascriptnode.jsreactjs

Refreshing information through Angular factories after modification of the source

For the purpose of this example, I've simplified my application and maintained its original structure even though it could have been done more easily. At the start, I set up a rootScope to mimic the data source in the app: .run(function($rootScope){ ...

angularjsionic-frameworkangular-ui-router

Finding a JSON file within a subdirectory

I am trying to access a json file from the parent directory in a specific file setup: - files - commands - admin - ban.js <-- where I need the json data - command_info.json (Yes, this is for a discord.js bot) Within my ban.js file, I hav ...

javascriptnode.jsjson

Troubleshooting ng-view with partials in AngularJS/Express: What to do when it

Everything was working fine until I attempted to display a partial file in ng-view. /public/app/app.js angular.module('app', ['ngResource', 'ngRoute']); angular.module('app').config(function($routeProvider,$locati ...

node.jsangularjsexpresspug

What is the best way to limit a form to only allow 2 checkbox selections?

Seeking advice on implementing a form for a website giveaway featuring 3 prizes. Each participant should only be able to select 2 items from the list. I've already created a JavaScript-based form, but I'm concerned about its reliability since it ...

phpjavascript

Transforming HTML features into PHP scripts. (multiplying two selected values)

I am currently working on converting these JavaScript functions into PHP in order to display the correct results. I need guidance on how to use PHP to multiply the values of the NumA and NumB select options, and then show the discount in the discount input ...

javascriptphphtmlcss

Attempting to generate a cost estimator, however, no results are showing up upon clicking the calculate button

Having based my code on a template and being fairly new to Javascript, I expected everything to work smoothly. However, upon testing it, I encountered an issue where nothing was displayed in the results boxes. My goal is to develop a pricing calculator th ...

javascripthtml

Backbone sorting is specifically designed for organizing views within the framework

As I work on creating a sorting function in backbone, I have come across recommendations to use views to listen for changes in collections and then render the views once the collections are sorted. However, this approach does not suit my needs for two main ...

javascriptperformancesortingbackbone.js

The webpage is failing to refresh even after using history.push()

While working on my React dictionary project, I encountered an issue with React Router. After using history.push() with the useHistory hook from react-router, the page does not re-render as expected. I have a search bar and utilize this function to navigat ...

javascriptreactjsreact-router

Capturing Data from Tables and Saving it with Protractor

Imagine having a table structured like this <h2>HTML Table</h2> <table> <tr> <th>Company</th> <th>Contact</th> <th>Code</th> </tr> <tr> <td>Alfreds Fu ...

javascriptselenium-webdriverprotractor

The saving function of the Jquery camera is not working properly and does not store the

I seem to be having an issue when using the jquery camera in "save" mode. Despite trying to call the url in "webcam.save" manually, it doesn't seem to have any effect. It appears that the jquery camera plugin may not be functioning as intended. Any su ...

javascriptjquery

What is the best way to implement a custom toast delay in a React application using setTimeout

The concept is straightforward: When the function showToast is called, I aim to change my toast's className to show, and then remove it by replacing with an empty string after displaying it for 3 seconds. HTML: <div id="toast">New col ...

javascriptreactjs

Any suggestions on resolving the "script timeout" issue while running a script using Python's SeleniumBase Library?

Recently starting to use Python, I am currently using Python's seleniumbase library to scrape a website and need to periodically run this fetch script. While experimenting, I encountered a script timeout error when the response time exceeded around 95 ...

javascriptajaxfetch-apiseleniumbase

Does the syntax for the $.ajax() function appear to be incorrect in this instance?

I am attempting to use .ajax to retrieve the source HTML of a specific URL (in this case, www.wikipedia.org) and insert it into the body of a document. However, the code provided below is not producing the expected outcome. <!DOCTYPE html> < ...

javascriptjqueryajax

The Ajax response is coming back with a null value, but upon inspecting the network response

I'm facing a strange issue where one specific value from an ajax json response is showing up as an empty string, while all other values are appearing correctly. An unusual aspect of this problem is that the network panel displays the correct value in ...

javascriptjqueryasp.netajaxangularjs

Building nested tree directives with Angular.js using JSON data

Imagine you have an Angular directive that looks like this: <my-tree> <my-tree-item>First</my-tree-item> <my-tree-item>Second</my-tree-item> <my-tree-item>Third</my-tree-item> <my-tree-group> A ...

angularjsangularjs-directiveangularjs-ng-repeat

What could be causing my Wikipedia opensearch AJAX request to not return successfully?

I've been attempting various methods to no avail when trying to execute the success block. The ajax request keeps returning an error despite having the correct URL. My current error message reads "undefined". Any suggestions on alternative approaches ...

javascriptjqueryajaxwikipediawikipedia-api