CODEWITHSUNDEEP
angularjsangularfire
alturist
alturist

Reputation: 9

Reading data from firebase in angularfire

I have an app where I need to store artists and their details in database.Now I want to retrieve all the artists and render some of their details in front end.How to do that. Secondly, if I get the artist rating in some input field by using ng-model, then how to store that value in a particular artist to update details. The database structure is:

{
    "artists": {
        "Atif":{
            "name":"atif",
            "rating":8
        },
        "Himesh":{
            "name":"himesh",
            "rating":5
        }
    }
}

and this is angular.js

(function()
  {

var app = angular.module("myapp", ["firebase"]);

app.controller("maincontroller", function($scope, $firebaseObject,$firebaseArray)
{
  var ref = new Firebase("https://gigstart.firebaseio.com/");

  var artists=ref.child("artists");


  // download the data into a local object
  $scope.data = $firebaseObject(ref);

  // putting a console.log here won't work, see below
    ref.on("value", function(snapshot)
    {
      console.log(snapshot.val());
    }, function (errorObject) 
    {
      console.log("The read failed: " + errorObject.code);
    });


   var artistsRef=new Firebase("https://gigstart.firebaseio.com//artists");




}); //end of controller

Now I want to render the name and rating of each artist in front end.Can I do something like

<div ng-repeat="artist in artists">
    {{artist.name}}
    {{artist.rating}}
</div>

Upvotes: 0

Views: 2309

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598817

You have a list of artists, which you want to ng-repeat over in your Angular view. You can accomplish that by:

app.controller("maincontroller", function($scope, $firebaseArray)
{
  var ref = new Firebase("https://gigstart.firebaseio.com/");    

  var artists = ref.child("artists");

  $scope.artists = new $firebaseArray(artists);
}

Please take a moment to go through the AngularFire quickstart before starting on your own project. This is covered in step 5.

Upvotes: 2

Related Questions