How to display data from a Javascript file in ionic?

Question

I am new to Javascript and Ionic and I would like to know how to display the name of my user in the app itself.

I have a connection to Firebase that works fine

Here is the code of js file :

var userId = '-KcntxrTC1eZjrkyycn4';
return firebase.database().ref('/accounts/' + userId).once('value').then(function(snapshot) {
    var displayName = snapshot.val().name;
    console.log(displayName);
    // ...
});

My html file is controlled by the controller where this code is.
The console log renders "Sebastien" so it works
When I write {{displayName}} in my html document, nothing shows up.

What am I missing ?

EDIT - ADD CODE

Here is the code of my controller :

.controller('accountController',['$scope', '$firebaseArray', 'CONFIG', '$document', '$state', function($scope, $firebaseArray, CONFIG, $document, $state) {

  var userId = '-KcntxrTC1eZjrkyycn4';
  return firebase.database().ref('/accounts/' + userId).once('value').then(function(snapshot) {
  var displayName = snapshot.val().name;
  $scope.displayName = snapshot.val().name;
  console.log(displayName);
  // ...


  });
}])

Here is the code of my HTML document :

<!-- *profile-name / name profile -->
                <h3 class="profile-name">{{diplayName}}</h3>

The thing is that I get the name to show up in the console as soon as I log in but when I visit the page that is controlled by the actual controller, it doesn't pick it up. Like it didn't understand that it has to take the data from Firebase.

You have to place the properties you want to use in your views on your $scope object: $scope.displayName = snapshot.val().name; — devqon
– devqon, Commented Feb 13, 2017 at 14:05

Sanjay Nishad · Accepted Answer · 2017-02-13 14:09:00Z

2

whatever you want to show in view, you need to add in $scope angular service

JavaScript

$scope.data = {
  fName: "Sanjay",
  lName: "Nishad"
}

HTML

<p> {{data.fName}} </p>
<p> {{data.lName}} </p>

In your case: You don't need to declare var displayName = snapshot.val().name; just add in $scope

$scope.displayName = snapshot.val().name;

or

$scope.displayData = snapshot.val();

answered Feb 13, 2017 at 14:09

Sanjay Nishad

1,62515 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

FrenchyNYC Over a year ago

Hello thank you for your time but it is still not working, it writes the value in the console but still doesn't show up anything...

Sanjay Nishad Over a year ago

What is showing? And which element are you using? May be that element clear by some other JS code or spell mistake

FrenchyNYC Over a year ago

I edited my initial code, and nothing is showing at all, not even an error in the console, nothing. It just leaves a blank space instead of the name.

Sanjay Nishad Over a year ago

try once $scope.$apply() after assigning the value

FrenchyNYC Over a year ago

Thank you very much, indeed, it worked like a charm !

devqon · Accepted Answer · 2017-02-13 15:12:44Z

1

I think this is because angular does not pick up the database read because it is happening outside of its $digest cycle. If you wrap your code in an $apply, it will probably work:

firebase.database()
    .ref('/accounts/' + userId)
    .once('value')
    .then(function(snapshot) {
        var displayName = snapshot.val().name;
        console.log(displayName);

        $scope.$apply(function() {
            $scope.displayName = displayName;
        });
    // ...
});

Note: Remove the return statement. A controller should not return anything.

answered Feb 13, 2017 at 15:12

devqon

14k2 gold badges32 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to display data from a Javascript file in ionic?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related