We Keep Coding

Displaying data on the page from the data gotten from parse

I have offers table and users table on parse server. I did a query for he offers table and it worked great (both console log and html - I had issues with async and the Q.promise helped). Now I'm trying to add two elements that are in the users table. I get it on the console, but not on the page. Here is what I have on the offers.service:
this.getAllOffers = function () {
var Q = $q.defer();
console.log('getAllOffers called');
//all offers filter is selected
this.allOffersFilter = false;
var offers = Parse.Object.extend("Offer");
var exchanges = Parse.Object.extend("Exchanges");
var users = Parse.Object.extend("User");
var query = new Parse.Query(offers);
var userQuery = new Parse.Query(users);
var results = [];
query.descending("createdAt");
query.limit(4);
userQuery.find().then(function(users) {
for (i = 0; i < users.length; i++) {
foundUsers = users[i];
query.find().then( function(offers){
for(i = 0; i < offers.length; i++){
found = offers[i];
var result = {};
result.date = found.get("createdAt");
result.price = found.get("price");
result.status = found.get("accepted");
result.lastName = foundUsers.get("lastName");
result.companyName = foundUsers.get("companyName");
console.log(result.companyName);
console.log(result.price);
}
});
results.push(result);
}
Q.resolve(results);
});
return Q.promise;
};
Then my HTML:
<!--List of offers-->
<div class="col-md-3">
<h4>List of offers</h4>
<div ng-if="offersList">
<div ng-repeat="offer in offersList">
<div class="offer card">
<div>{{offer.username}}</div>
<div>{{offer.companyName}}</div>
<div>{{offer.date}}</div>
<div>{{offer.price}}</div>
<div>{{offer.status}}</div>
</div>
</div>
</div>
<div ng-if="!(offersList)">There are no offers</div>
</div>
Then my component:
angular.module('offersPage')
.component('offersPage', {
templateUrl: 'pages/offers-page/offers-page.template.html',
controller: function(AuthService, PageService, OffersService,
$scope) {
// Functions for offers-page
// Check if user is logged in and verified on page load
AuthService.userLoggedin(function(loggedIn, verified) {
if(!verified) {
PageService.redirect('login');
}
});
this.$onInit = function() {
OffersService.getAllOffers().then(function(offersList) {
$scope.offersList = offersList;
});
}
}
});
THANKS IN ADVANCE !

You are resolving $q before results is populated, so, you list is empty.
I don't know about Parse server, but if userQuery.find().then is async, then need to move Q.resolve(results); inside it, or probably inside query.find().then.

When you do an ng-if in angularjs it literally takes out the element and when it puts it in it is as a child scope. To fix this you need to make sure and put $parent on any child element inside an ng-if. See below. Make sure to use track by $index to when you are doing repeats its good practice. Also notice you dont need to $parent anything in the repeat since it is referencing offerwhich is defined.
Code:
<div ng-if="offersList">
<div ng-repeat="offer in $parent.offersList track by $index">
<div class="offer card">
<div>{{offer.username}}</div>
<div>{{offer.companyName}}</div>
<div>{{offer.date}}</div>
<div>{{offer.price}}</div>
<div>{{offer.status}}</div>
</div>
</div>
</div>

ng-repeat doesnt loop thru my array

Hey everybody can somebody please give me a clue what im doing wrong here?
I trying to build a wrapper where every element in my array gets a and a id
But when i loop thru my real array i only get a error with the text: Error: [ngRepeat:dupes] ...
With a fake array i made it works perfect.
MY HTML:
<div class="translaterBox">
<span ng-repeat="person in persons" id="{{person}}">
{{person + " "}}
</span>
<span ng-repeat="text in textWords" id="{{text}}">
{{text + " "}}
</span>
</div>
MY SCRIPT
var app = angular.module('splitScreenApp', []);
app.controller('splitCtrl', function ($scope, $http) {
$scope.translatetText = "Translate Here";
$http.get("getContent.php")
.then(function (response) {
var content = response.data.content;
$scope.content = content;
function splitContentToWords() {
var text;
for(var i = 0; i <= content.length;i++ ){
if(content[i].text){
var text = content[i].text;
}
return text.split(' ');
}
}
$scope.persons = [
'Jack',
'Jill',
'Tom',
'Harvey'
];
$scope.textWords = splitContentToWords();
console.log($scope.textWords);
console.log($scope.persons);
});
});
Thank you really much for your help

When you get an error about dupes from Angular, it is because there are duplicate keys. You can solve this by using track by as seen in the documentation.
Try changing your ng-repeat to:
<span ng-repeat="person in persons track by $index" id="{{person}}">
<span ng-repeat="text in textWords track by $index" id="{{text}}">

Template7 with Famework7 only works on index

I'm try to load data from Firebase in 2 different framework7 and template 7 pages.
Unfortunately only work only on the index page. I've no idea why.
Here's my html code.
<script id="calendario" type="text/template7">
<div class="title">Calendario</div>
{{#each Tornei}}
<a href="calendario-detail.html" class="eventblock w-inline-block item-content item-link" data-context-name="Tornei.{{#key}}">
<div class="w-row">
<div class="nopadding w-col w-col-6 w-col-small-6 w-col-tiny-6">
<div class="smalltext">{{this.Location}}</div>
</div>
<div class="nopadding w-col w-col-6 w-col-small-6 w-col-tiny-6">
<div class="smalltext">{{Location}}</div>
</div>
</div>
<div class="titleevent titologreen">{{#key}}</div>
<div class="smalltext">4 / 8</div>
</a>
{{/each}}
and this is myapp.js
myApp.onPageInit('calendario', function (page) {
var ref = firebase.database().ref("/");
ref.on("value", function(snapshot) {
var template = $$('#calendario').html();
var compiledTemplate = Template7.compile(template);
var ourGeneratedHTML = compiledTemplate(snapshot.val());
console.log(snapshot.val());
$$('#1').html(ourGeneratedHTML);
$$('.eventblock').on('click', function () {
var nameEvent = $$(this).children('.titleevent').text();
mainView.router.loadPage("calendario-detail.html?eventName=" + nameEvent);
});
});
}).trigger();
myApp.onPageInit('calendario-detail', function (page) {
var ref = firebase.database().ref("/");
ref.on("value", function(snapshot) {
var template = $$('#calendario-detail').html();
var compiledTemplate = Template7.compile(template);
var last = JSON.stringify(snapshot.val())
console.log(last);
var ourGeneratedHTML = compiledTemplate(snapshot.val());
console.log(snapshot.val());
$$('#1').html(ourGeneratedHTML);
console.log(ourGeneratedHTML);
});
});
As you can see they are identical but template7 only works in my index.
Can you help me out please? Thanks.

I had the same problem, so, I initialize my app:
var myApp = new Framework7({
// Unable templates auto precompilation
precompileTemplates: false,
// Unabled pages rendering using Template7
template7Pages: false,
});
After that I can compile templates on another views with onPageAfterAnimation.

Retrieving user data from Firebase

I can't figure out what I'm doing wrong. The user name in Firebase is not being retrieved and updated.
This is my HTML:
<div class="header">
<div class="userPanel">
<div class="pic"></div>
<div class="welcome"><span>Welcome</span><h1 class="name" id="firstname">John</h1></div>
</div>
<div class="title"></div>
JS code:
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log(user.uid);
var userRef = firebase.database().ref().child('Users')
var uid = user.uid;
var firstname = document.getElementById('firstname');
firebase.database().ref('Users/' + uid).on('value', function(snapshot){
var firstname.innerHTML = snapshot.val().Firstname;
});

Looks like the uid is undefined in the screenshot of your Firebase database. I'm guessing the user.uid you console.log is not undefined. What is output in your console?
Also, take out var in var firstname.innerHTML. You're not declaring a new variable called firstname.innerHTML.

Angularjs firebase array object always display false

Hi i having problem when i retrieve data from firebase in console.log($scope.statusbaca) it display 2 query true and false. but when it showing in the app it only display false. Sorry for my bad english. English is not my native language. Hope you understand my problem
App return false but console log display true and false
and this is my code
Template
<div ng-repeat= "item in users">
<div class="list card" style="padding:1%;">
<div class="col-50" style="float:left;">
<h5>{{item.displayName}} - {{item.handphone}}</h5>
<h5>{{item.email}}</h5>
</div>
<div class="col-33" style="float:right; position: relative;" ng-repeat = "datas in statusbaca">
<h5>{{datas}}</h5>
</div>
</div>
</div>
Controller
var rootRef = new Firebase('https://example-app.firebaseio.com/');
var childUsers = rootRef.child('users');
var childDate = rootRef.child('tanggal');
var rekapId = $stateParams.rekapId;
console.log(rekapId);
childDate.child(rekapId).child('tanggalBaca').once('value',function(snap){
$timeout(function() {
var snapshot= snap.val();
$scope.tanggal = snapshot;
console.log($scope.tanggal);
myAfterFunction();
});
})
function myAfterFunction(){
var dates = $scope.tanggal;
console.log(dates);
var rekapUsers = childUsers.on('value', function(snapshot){
snapshot.forEach(function(childSnapshot){
var key = childSnapshot.key();
console.log(key);
var childStatus = childUsers.child(key+'/status/'+dates);
childStatus.on('value',function(grandsnap){
var snapval =grandsnap.val();
$scope.statusbaca = snapval;
$scope.key = key;
console.log($scope.statusbaca);
console.log($scope.key);
})
})
var snapshotVal = snapshot.val();
$scope.users =snapshotVal;
console.log($scope.users);
})
}
Any idea what's wrong with my code and how to fix this? thanks

I'm not sure if this will fix it but your div elements are unbalanced.
You should add a ending div element like this,
<div class="col-33" style="float:right; position: relative;" ng-repeat = "datas in statusbaca">
<h5>{{datas}}</h5>
</div>
Also, I can't find some of the variables referenced by the HTML in the JavaScript and rather than having your
value output like this:
<h5>{{datas}}</h5>
you should have it like this:
<h5>{{datas.THE NAME OF YOUR KEY:VALUE PAIR}}</h5>
I can't test it since you're using firebase but, I would do quick run through with your code.