I want to get all type from the /type in my angualr firebase app.
I have written a provider function
getAllDetails() {
let fn = firebase.database().ref('/type').on("value", function (snapshot) {
console.log(snapshot.val());
return snapshot.val();
});
return fn;
}
and on the main class i am trying to pull all data in the Array
type: Array<any> = [];
ngOnInit() {
this.type.push(this.db.getAllDetails());
}
But it is not pulling any Data in the ngFor Tag in the html , in the console the objects are getting printed. Attached images.
<ion-select>
<ion-option *ngFor="let item of type ">{{item.type}}</ion-option>
</ion-select>
enter image description here
Related
I am learning typescritp and I have already been around the web a thousand times and I did not find anything clear about how to iterate arrays
with ngfor to display on screen ...
below an image of how I am saving the data in firestore.
I would like to show each array eg "title", "date" like the image below (with documents without arrays there is no problem)
datos firebase
my service:
listarNotificacionSrv3(): Observable<any> {
return this.firestore.collection('notificacion').get();}
my component
listarNotificacion2() {
this.subscription = this.notificacionService
.listarNotificacionSrv3()
.subscribe((doc) => {
console.log('doc', doc);
this.listarnotificacion2 = [];
doc.forEach((element: any) => {
this.listarnotificacion2.push({
id: element.payload.doc.id,
...element.payload.doc.data(),
});
});
});}
my html:(Here I don't know how to iterate the arrays in my particular case)
<div class="card mt-3" *ngFor="let datos of listarnotificacion2 | keyvalue ">
<h5>ver: {{datos}}</h5>
</div>
the expected jajaja:
view data in screen
returns on screen with snaphshotChanges ()
returns on screen
From already thank you very much!
cheers!
sorry for my inglish...
I have a component which has a mat-table with checkboxes using SelectionModel. Here is the code I have to retrieve the data selected.
fileSelect = new SelectionModel<FileInfo>(true, []);
This method is invoked in ngSubmit of the form.
sendFileInterrupt() {
let selectedFileIds: string[];
for (let item of this.fileSelect.selected) {
console.log(item.fileId);
selectedFileIds.push(item.fileId);
}
The selected fileId is logged in console, but when trying to add it to the selectedFileIds array, I'm getting an error
Cannot read property 'push' of undefined
Do I have to instantiate or initialize the array before pushing data into it ?
You need to initialize let selectedFileIds: string[] = [];
sendFileInterrupt() {
let selectedFileIds: string[] = [];
for (let item of this.fileSelect.selected) {
console.log(item.fileId);
selectedFileIds.push(item.fileId);
}
You don't need to iterate through this.fileSelect.selected, it is already an array of rows rows[];
json array localstorage format
Hello, I'm developing an ionic app. I'm new in Ionic and Typescript.
As you can see in the image below I'm parsing from an API my data in a json array.
On ts file I'm writing this code
`
public categoryDetails:any;
const datacat = JSON.parse(localStorage.getItem('categoryData'));
this.categoryDetails = datacat.categoryData;`
And in my html file when I write this
<h1 class="business-top">Business of the category {{categoryDetails.name}}</h1>
I get the error message "TypeError: Cannot read property 'name' of undefined"
I know that I don't read the attribute "name" correctly. How can I do this one?
Moreover, how can I display Businesses which associate with the spesific term_id of the category?
In this example you need to do that
<h1 class="business-top">Business of the category {{categoryDetails?.name}}</h1>
public categoryDetails: any;
this.categoryDetails = localStorage.getItem('categoryData');
or you can use ionic storage. it is better if you are using ionic.
https://ionicframework.com/docs/storage/
import { Storage } from '#ionic/storage';
export class MyApp {
public categoryDetails: any;
constructor(private storage: Storage) { }
...
// set a key/value
storage.set('categoryData', 'Max');
// Or to get a key/value pair
storage.get('categoryData').then((val) => {
this.categoryDetails = val;
});
}
I finally fingured it out.
#Kilomat thanks for your help and your advice about using ionic storage. That saved me from futured problems.
About my json file that's what I did.
In my HTML code
<ion-grid no-margin>
<h1 class="business-top">Επιχειρήσεις της κατηγορίας {{businessData.name}} {{businessData.term_id}}</h1>
<ion-list>
<ion-item class="col col-50" *ngFor="let c of BusinessCategoryDetails" text-wrap (click)="product(c)">
<div *ngIf="c.term_id == businessData.term_id">
<h2>{{c.post_title}} {{c.term_id}}</h2> <img width="80" height="80" src="{{c.guid}}">
</div>
</ion-item>
</ion-list>
</ion-grid>
And in my TS code
`var businessCategory: categories = navParams.get("businessCategory");
console.log(businessCategory); /exports the Selected category/
var newData = JSON.stringify(businessCategory);
this.businessData = JSON.parse(newData);`
Which takes properties and values from my previous category page. TS code
`categories: [categoryDetails] = null;
gotobusiness(category: categories){
this.navCtrl.push(BusinessPage, { businessCategory: category});
}`
I have an empty array, called rows and I want to display it with *ngFor. On each row of the array I pass the response from an http request. All the http requests are called sequentially. Even though the array is fed correctly, the *ngFor is never updated. I want to display each row sequentially by the time I receive its request response.
<div class="row" >
<my-rows
*ngFor="let row of rows | keys; trackBy: trackByFn; let index = index"
[month]='row.value'
[title]='row.key'>
</my-rows>
</div>
getRerports(url: string, dates: any, id: any){
let params = new URLSearchParams()
params.set('company_id',id)
params.set('date',dates[0])
this.authHttp.get(this._getReportsUrl,{search:params})
.subscribe(
data=>{
let formatedDate = moment(data.json().date,'YYYY-MM-DD').format('MMMM YYYY')
this.rows[formatedDate] = data.json()
dates.splice(0,1)
this.flag = false
if(dates.length>0){
this.getRerports(this._getReportsUrl,dates, id)
}else{
this.flag=true
}
},
err=> console.log(err)
)
}
trackByFn(index:any, item:any) {
return index;
}
Use ChangeDetectorRef if view is not updated.
constructor(private ref: ChangeDetectorRef)
Use this.ref.detectChanges() when you update your array.
I ve tried to change how I provide the object to rows array and instead of
this.rows[formatedDate] = data.json()
I ve used this:
let object = {key:formatedDate, value: data.json()}
this.rows.push(object)
and it seems to work just fine.
So the problem was in the array initialisation.
I want to relate a business to another business in my Firebase data and then use AngularFire to ng-repeat through the related businesses. My Firebase data is structured like so:
{
"businesses" : {
"-KQ1ggyrnYGYL1084Htz" : {
"name" : "Some Business",
"cat" : "Food",
"related" : {
"-KQ1hFH0qrvKSrymmn9d" : true,
In my JS I have the following factory and controller:
app.factory("Businesses", ['$firebaseArray', function ($firebaseArray) {
var stuff = firebase.database().ref().child("businesses");
var Businesses = $firebaseArray(stuff);
return Businesses;
}])
And my controller:
app.controller('businessCtrl', ['$scope','$firebaseArray','Businesses', function ($scope, $firebaseArray, Businesses) {
$scope.businesses = Businesses;
In the HTML I then loop through the "Related" businesses using an ng-repeat like so:
<span>Related:</span>
<a ng-repeat="item in businesses.related" ui-sref="shop.item({item: item.link})">
<div class="chip">
<img ng-src="{{item.card}}" alt="Contact Person">
{{item.name}}
</div>
</a>
But I seem unable to access any data such as "name" from my {{item.name}}. What do I need to do to be able to access the data of the referenced business?
If you want to access the data item.name then use item in businesses instead of item in businesses.related
When using item in businesses.related you are getting the data as item.-KQ1hFH0qrvKSrymmn9d
Alright, so I discovered how to do this sometime later. It may have worked the way I was trying, but it's not the recommended approach. For one, denormalization in Firebase is normal. Meaning, instead of placing the related businesses in a sub-object I need to create a new object like so:
businesses
-BusinessKey
related
-BusinessKey
-RelatedBusinessKey
Then get the data like so:
$scope.related = [];
const businessKey = $scope.finalItem.$id;
const rootRef = firebase.database().ref();
const discoverRef = rootRef.child('discover');
const businessRef = rootRef.child('businesses');
function getRelatedContent(key, cb) {
relatedRef.child(key).on('child_added', snap => {
let businesRef = businessRef.child(snap.key);
businesRef.once('value', cb);
});
}
getRelatedContent(businessKey, snap => {
var snapVal = snap.val();
$scope.related.push(snapVal);
});